Chrome的CSS可见性呈现是否有错误？ [英] Is there a bug in Chrome's CSS visibility rendering?
问题描述
在Chrome 15+中使用这种特殊的CSS属性组合时，似乎存在奇怪的行为，即具有可见性隐藏和固定定位的外部元素，以及在可见性上具有覆盖的绝对或相对定位的内部元素。
< html>
< head>
< title>< / title>
< / head>
< body>
< div style =position：fixed; visibility：hidden;>
< div style =position：absolute; visibility：visible;>
< img src =https://www.google.com/intl/en_com/images/srpr/logo3w.png/>
< / div>
< / div>
< script type =text / javascript>
for（var i = 0; i< 100; i ++）{
document.write（< br />）;
}
< / script>
< / body>
< / html>
上面的代码片段在滚动时生成此图像。
相对和绝对定位都重现行为可以被粉碎到这样的事实：对于这个特定的DOM绝对定位等价于相对定位。
在这种情况下标记是有效的，并且确实具有定义的行为，这指向浏览器/呈现引擎中的错误，并且它看起来像性能优化变坏，特别是考虑到Chrome 15更新中引入了此行为。
JSFiddle链接由Sparky672提供
更新：
此行为已报告给 WebKit Bugzilla ，似乎介绍了该bug的更改集已被识别。
是的，有一个错误，绝对：我设法在我的Chrome版本中重现。
如果你想修复它，你可以添加webkit的hasLayout修复， 这是一个固定的小提琴： http://jsfiddle.net/kizu/bHzWN/6/show/ There seems to be odd behavior in Chrome 15+ when using this particular combination of CSS properties, namely an outer element with visibility hidden and fixed positioning and an absolutely or relatively positioned inner element that has an override on visibility. The code snippet above produces this image when scrolled.
The fact that both relative and absolute positioning both reproduce the behavior can be chalked up to the fact that for this particular DOM absolute positioning is equivalent to relative positioning. In the case that this markup is valid and does have defined behavior, this points to a bug in the browser/rendering engine, and it looks like a performance optimization gone bad, especially given that this behavior was introduced with the Chrome 15 update. JSFiddle link courtesy of Sparky672 Update: This behavior has been reported to the WebKit Bugzilla and seems that the changeset that introduced the bug has been identified. Yep, there is a bug, definitely: I managed to reproduce it in my version of Chrome too. In case you'll want to fix it, you could add the "webkit's hasLayout" fix, Here is a fixed fiddle: http://jsfiddle.net/kizu/bHzWN/6/show/ 这篇关于Chrome的CSS可见性呈现是否有错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ -webkit-transform：translateZ（0）;
<html>
<head>
<title></title>
</head>
<body>
<div style="position:fixed;visibility:hidden;">
<div style="position:absolute;visibility:visible;">
<img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png" />
</div>
</div>
<script type="text/javascript">
for(var i=0; i<100; i++) {
document.write("<br />");
}
</script>
</body>
</html>
-webkit-transform: translateZ(0); to wrapper or inner element, this makes Chrome to render the block properly.
