Chrome does not redraw
after it is hidden

Question

I have some `div`s 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?

Accepted Answer

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.

Chrome does not redraw <div> after it is hidden

Solution

Problem