Question

在使用CSS属性的这种特殊组合时，Chrome 15+中似乎有奇怪的行为，即具有隐藏可见性和固定定位的外部元素以及具有可见性覆盖的绝对或相对定位的内部元素。

<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>

上面的代码段会在滚动时生成此图像。 Chrome visibility issue

相对和绝对定位都能重现行为的事实可以归结为这样一个事实：对于这个特定的DOM，绝对定位等同于相对定位。

如果此标记有效且确实具有已定义的行为，则表明浏览器/呈现引擎中存在错误，并且性能优化看起来很糟糕，特别是考虑到Chrome 15引入了此行为更新

JSFiddle link由Sparky672提供

更新

此行为已报告给WebKit Bugzilla，并且似乎已确定引入该错误的变更集。

Answer 1

是的，肯定有一个错误：我也设法在我的Chrome版本中重现它。

如果您想修复它，可以将“webkit的hasLayout”修复程序-webkit-transform: translateZ(0);添加到包装器或内部元素，这会使Chrome正确呈现该块。

这是一个固定的小提琴：http://jsfiddle.net/kizu/bHzWN/6/show/

Answer 2

是的，这是一个错误。它似乎是一个Web-kit回归错误，它始于535版本，并且在许多版本的Chrome中都很明显，甚至直到18.x

kizu的黑客很好，作为一种解决方法，直到他们再次解决它。

Chrome的CSS可见性渲染中是否存在错误？

2 个答案: