views:

112

answers:

4

Has anyone seen the following rendering bug in google chrome:

bug

I get it occasionally when I navigate to http://www.mediabrowser.tv

What causes it? Is there any workaround?

+1  A: 

I can't reproduce this right now, but I've seen similar in the past. Generally this happens when the element with the background is not full height.

Be sure you are applying the background to the body (which defaults to height 100%) and that you are not applying styles to the html tag (which would throw off the body rendering).

Try inspecting that white bit when next it happens. You might gain more insight into what's going wrong.

Another possibility is that the page hasn't finished loading the GA code at the bottom. If your script blocks at the end of your page take too long to execute you might see this before the closing html tag is rendered.

Possibly related: Chromium issue 5388

Joel Potter
As in, chuck the container in a sub container and give it background color of #ABABAB as opposed to applying that to the html tag
Sam Saffron
Apply the background color to the `body` tag and don't apply any styles to the `html` tag. Doing so isn't technically valid, and it can cause the `body` to behave more like a `div`.
Joel Potter
However, I just tested this theory and can't seem to reproduce the error.
Joel Potter
Sorry mistyped there, the bg is already applied only to the body tag. nothing is applied to the html tag.
Sam Saffron
yerp it could be analytics messing stuff up ...
Sam Saffron
A: 

omitted close tag...

It is possible that a closing tag was omitted.

foxhop
unlikely as the html validates http://validator.w3.org/check?uri=http://www.mediabrowser.tv/
Sam Saffron
A: 

I'm running Google Chrome as well, on Windows XP and I am not having a problem with the Rendering. Try closing your tab and reopening sometimes it has a caching type of error like most browsers do occasionally.

David
the issue only happens once in a while ... which is what really confuses me.
Sam Saffron
A: 

Part of the problem lies in specifying a height for the container while floating elements inside. Parent elements are never to expand to contain floated children. The only thing preventing this from collapsing altogether is the p element inside the last div. I'm not sure Chrome is doing anything wrong though Firefox is different but I don't have time to look at it further right now.

Rob