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.

Answer 2

I struggled with this for a very long time, and while adding -webkit-transform: scale3d(1,1,1); did fix my issue, I wanted to find out WHY. So, I dug deeper into my code to try and narrow down my issue. I found that i was using a fade in animation, and inside this, I included in the same class:

-webkit-backface-visibility:hidden;
backface-visibility:hidden;

Remove these two lines alone, fixed my issue without the scale transform hack.

Seeing as backface visibility is to do with transforms, and should have no effect on 2D transforms, I removed it and it fixed my issues entirely.

There have been many bugs noted with backface visibility with chrome, so I posted this for any future people trying to find out a fix without too much work.