问题
When I change the content of a span with javascript this change does not get rendered in Webkit browsers.
This only applies when a wrapper span is positioned relative containing an inner span that is positioned absolute and has a fixed width and height.
Here is the most simple example of the bug (check it in a webkit browser like Chrome or Safari)
<!DOCTYPE HTML>
<html>
<head>
<title>Webkit render bug</title>
<style type="text/css">
.wrapper {
position: relative;
}
#absolute-block {
display: block;
position: absolute;
width: 152px;
height:42px;
background-color: #EEEE00;
color: #FF0000;
}
</style>
</head>
<body>
<h1>Webkit render bug</h1>
<button onclick="document.getElementById('absolute-block').innerHTML = 'Update test';">Update test</button>
<span class="wrapper">
Some content
<span id="absolute-block">Absolute-block</span>
</span>
</body>
</html>
The click on the button will replace the content of the span in the DOM-tree but this doesn't get rendered by the webkit based browsers like Chrome and Safari. Other browsers do not have this render bug.
Does anyone know if this will get fixed in the near future? Or is it better to work around this browser issue?
来源：https://stackoverflow.com/questions/10534136/webkit-render-bug-for-dynamic-content