Chrome的CSS可见性渲染中是否存在错误？
Nov*_*kov 12 css google-chrome
当使用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>
上面的代码片段在滚动时会生成此图像.
相对和绝对定位都重现行为的事实可以归结为这样的事实:对于这个特定的DOM,绝对定位等同于相对定位.
如果此标记有效且确实具有已定义的行为,则表明浏览器/呈现引擎中存在错误,并且性能优化看起来很糟糕,特别是考虑到Chrome 15更新引入了此行为.
JSFiddle链接由Sparky672提供
更新:
已经向WebKit Bugzilla报告了此行为,并且似乎已经识别出引入该bug的变更集.
kiz*_*izu 36
是的,肯定有一个错误:我设法在我的Chrome版本中重现它.
如果您想要修复它,您可以将"webkit的hasLayout"修复添加-webkit-transform: translateZ(0);到包装器或内部元素,这使Chrome可以正确地渲染块.
这是一个固定的小提琴:http://jsfiddle.net/kizu/bHzWN/6/show/
- 3年后,我仍然遇到这个bug,而translateZ(0)解决了我的问题. (5认同)
- 向谷歌的保罗爱尔兰人表示同意,并且这是一个需要在此报告的错误:http://goo.gl/AnJW5 (3认同)
| 归档时间： |
|
| 查看次数： |
6421 次 |
| 最近记录： |