926321 - -moz-transform rotate: rendering of the backside issue (jsfiddle)

Status: UNCONFIRMED

(Core :: Layout, defect)

Description

[Mathieu]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36

Steps to reproduce:

Rotate test animation can be found here:
http://jsfiddle.net/6zyzu/3/
Compare the result on Chrome and Firefox. On Firefox, the backside doesn't render properly while the element is rotating.

Comment 1

[Mathieu]

More info about the jsfiddle test:

Leave your mouse over the red square in Firefox. While rotating the red square, the text on the red square's backface is hidden under the previous square (blue), then as soon as the rotation animation has finished, the text jumps above the blue square.

Comment 2

[Alice0775 White]

I think this is wrong CSS.

1. Forgotten unit for <length> values
      perspective: 1000px;
2. Reverse rotation direction (maybe you intended)
       rotateY(-180deg);

Comment 3

[Mathieu]

1. Ineed I forgot to specify the measure unit for perspective attribute, but didn't change the problem fixing it.

2. On Firefox I have to rotate in another direction (-180deg). However a 180deg rotation works for WebKit and Chrome, and not on Firefox.