Chrome does not redraw <div> after it is hidden

css google-chrome browser redraw
brentonstrine picture brentonstrine · Jun 12, 2012 · Viewed 7.1k times · Source

I have some divs that show up on hover, and then are hidden. However, in Chrome (19.0.1084.56 m, Windows XP) when you unhover, Chrome doesn't redraw them as gone until you do something like scroll or resize the window.

http://jsfiddle.net/y7NdR/3/

I am aware that certain modifications to my CSS will fix the problem, e.g. removing the position or z-index and overflow properties, but I really don't want to do that--the JSfiddle is paired down from a full site where I need them.

Can anyone shed any light on exactly why this redraw problem is happening in Chrome? Does anyone have any tips to fix it without messing with the CSS that I need?

Answer

thirtydot picture thirtydot · Jun 12, 2012

Clearly, this is a WebKit bug.

I found that adding -webkit-transform: scale3d(1,1,1); fixes it:

http://jsfiddle.net/thirtydot/y7NdR/5/

I'm not sure if there are any downsides to this fix. I guess this works because inside WebKit, different code is used to render 3D transforms.

Related questions

What does it mean when a CSS rule is grayed out in Chrome's element inspector?

I'm inspecting an h2 element on a web page using Google Chrome's element inspector and some of the CSS rules--which appear to be applied--are grayed out. It seems that a strike-through indicates that a rule was overridden, but what does …

Read More
Can you add new CSS properties in Chrome Inspector?

Is it possible to add new CSS properties in the Chrome inspector? It seems that you can only edit existing properties. Also, once you edit the properties, is there a way to view the revised CSS as a whole?

Read More
How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More