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

UNCONFIRMED
Unassigned

Status

()

UNCONFIRMED
5 years ago
5 years ago

People

(Reporter: mett.work, Unassigned)

Tracking

24 Branch
x86_64
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

5 years ago
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.
(Reporter)

Updated

5 years ago
(Reporter)

Updated

5 years ago
Component: Untriaged → Layout
Product: Firefox → Core
(Reporter)

Comment 1

5 years ago
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

5 years ago
I think this is wrong CSS.

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

Comment 3

5 years ago
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.
You need to log in before you can comment on or make changes to this bug.