CSS3 3D transitions flicker in firefox when they also use box-shadow

Question

I have an apple-like element that is created using CSS3 transition and 3D transforms.

http://jsfiddle.net/7eDkb/1/ (transition with box shadow)

It works smoothly on chrome, but on firefox, the covers flicker between visible and invisible when they are animated.

After the repair process, I found that removing the css "box-shadow" property from elements leads to smooth transitions in firefox.

http://jsfiddle.net/7eDkb/2/ (transition without window shadow)

I tested this in firefox v15 and chrome v21.

Is there a solution to have both 3d transitions and box-shadow on an element without its flickering on firefox?

EDIT: in scripts, click grayscale images to see flicker

+5

Rodik Sep 09 '12 at 21:40

1 answer

Rodik · Accepted Answer · 2012-09-12T06:28:00+0000

There is a good reason why no one has answered this question yet, it is a firefox error.

I posted this in bugzilla and it was confirmed as a bug.

As @Kyle noted in his comment, the best solution is to use the non-elementary box-shadow alternative in case of firefox.