Menu
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.
<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>
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.
350
The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed.
display: none : hides the element and destroys its rendering state. This means unhiding the element is as expensive as rendering a new element with the same contents. visibility: hidden : hides the element and keeps its rendering state.
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, -webkit-transform: translateZ(0); to wrapper or inner element, this makes Chrome to render the block properly.
Here is a fixed fiddle: http://jsfiddle.net/kizu/bHzWN/6/show/
184
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
