Home/ Questions/Q 9170773
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T16:04:23+00:00

See the grey box on this page: http://goo.gl/fL973 When you hover it it’s suppose

  • 0

See the grey box on this page: http://goo.gl/fL973

When you hover it it’s suppose to flip over and show the other side. It works in Chrome, but for some reason i’m getting a lot of flickering during the animation. I tried fiddling around with the rules and even adding a container around the box, but no success.

I read this question, among others: Why is rotateY (flip) css3 animation flickering in Chrome?

The problem seems to be that elements with backface-visibility: hidden; cannot have backgrounds. So, as a workaround, i thought i could have an element inside .front and .back and give that element a background. That didn’t work, still flickered.

Other than that, i’m also not sure why it only works in Chrome/webkit. I do have the necessary prefixes for everything, so it should work, shouldn’t it?

Any suggestions?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Works fine after moving the backface-visibility: hidden; to the .front and .back instead of .card. The flickering disappeared. Now i’ll just have to come up with some fallback for non supporting browsers.

    • 0