987108 - css-3d-transformed elements display incorrectly

Status: RESOLVED WORKSFORME

(Core :: Graphics, defect)

Description

[andrew.steadman]

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

Steps to reproduce:

Demonstration URL: http://jsbin.com/yopejipi/1

Hover over the red rectangle to change a rotation angle by 0.1 degrees. For me, almost the entire rectangle disappears. [flickering is caused by the bounds being incorrect and the :hover style no longer applying post transformation, a side-effect of the same bug. ]

I've tested on windows. Present in Aurora 29.0a2 (2014-03-17) and Firefox 27.0.1.


Actual results:

I've noticed at certain rotation angles, some or all of a transformed element disappear. For me, this seems to happen when at least one corner has a z-component (when transformed) greater than or equal to the perspective of the parent (this may not be the same as above, i'm not sure).

On other browsers (for example, IE 11), it works fine. Given the small change in angle, there should be no discernible difference between the normal and hover styles.


Expected results:

Based on my math, and including the border width, the bottom right corner ([102,102,0,1]) gets mapped (post perspective calculation) to [244.32,95.84,120.12,-0.001] ie: it has a small negative w value. According to http://dev.w3.org/csswg/css-transforms/#processing-of-perspective-transformed-boxes that corner should then be removed and a new polygon created with extra nodes at the points where w=0.

Comment 1

[Florian Bender]

Confirmed in Firefox 32.0a1 (2014-05-11). It used to disappear almost completely, now it's flickering a lot, especially during mouse movement.

Comment 2

[Florian Bender]

… on OS X Mavericks 10.9.2, both with and without Hardware Acceleration. And it does disappear (almost) completely in certain cases (depending on mouse movement/position), and sometimes it's just flickering.

Comment 3

[andrew.steadman]

To clearly demonstrate the issue, i've modified the example slightly. This should help resolve some of the issues regarding "flickering", which is not the primary problem.

URL: http://jsbin.com/yopejipi/4

Hovering will now change the color from red to blue, while selecting between "x" and "y" will modify the transform. The "mouseover"/hover styling appears to use the "correct" transformed boundaries, but the rectangle is not painted correctly.

[Again, please note that the difference between the "x" styling and "y" styling is extremely minimal, and there should be almost no difference visually between the two styles]

Comment 4

[Gregory Pappas [:gregp]]

All of these test cases work correctly now.