Chrome CSS3 3D Transform bug

Question

I've got css to do a card flip on a element in 3d space. It works great except for when you scroll up and down the page you randomly get white elements displaying on the page at certain places in Chrome. I've attached an image as an example inside a facebook tab. In chrome windows, the white "boxes" cover up content on occasion. When I comment out the 3d transform css, this doesn't occur. Here is a fiddle (http://jsfiddle.net/derekaug/QSEvs/) of the css that does the 3d stuff. Unfortunately, I can't link to the actual tab yet as it's not public.

Answer 1

I have a problem like this before, not saying that it will work for sure but how I fixed it is removing all the transform css properties from the elements when they are not been used.

This is, only apply transform properties while the animation is on. This would mean in your example creating 2 classes one for each animation with all the transform properties, removing the ones on the base classes. Then on click apply the appropiate class and as soon as the transformation is over remove the class. There is a javascript callback that is fired on the elements when the transition is over that would let you remove the class:

CSS3 transition events