css - Chrome does not redraw <div> after it is hidden

Question

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 1

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.