3

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.

Example

derekaug
  • 2,145
  • 1
  • 17
  • 17
  • I can't replicate the problem in Chrome 18/OSX 10.6.8; saying that, might it be becayse `.entry` doesn't have a width? Try adding `width: 250px` to the `.entry` class? –  May 15 '12 at 13:23
  • Ah, not to worry then. Like I say, I couldn't get the problem myself so I was just clutching at straws! –  May 15 '12 at 13:44
  • there seems to be something to the fact that it's loaded inside an iframe in the facebook tab. I can't reproduce it unless it's in an iframe. – derekaug May 15 '12 at 14:05

1 Answers1

0

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

Community
  • 1
  • 1
Fernando Diaz Garrido
  • 3,995
  • 19
  • 22