CODEWITHSUNDEEP
cssgoogle-chrome
Novikov
Novikov

Reputation: 4489

Is there a bug in Chrome's CSS visibility rendering?

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. Chrome visibility issue

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.

Upvotes: 12

Views: 7537

Answers (2)

one.beat.consumer
one.beat.consumer

Reputation: 9504

Yes, it's a bug. It seems to be a Web-kit regression bug that started happening in version 535, and is noticeable in many versions of Chrome even up through 18.x

kizu's hack is fine as a workaround until they address it again.

Upvotes: 0

kizu
kizu

Reputation: 43224

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/

Upvotes: 36

Related Questions