909509 - Firefox doesn't order certain css 3d elements correctly when using css transform.

Status: NEW

(Core :: Layout, defect)

Description

[scripter]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:23.0) Gecko/20100101 Firefox/23.0 (Beta/Release)
Build ID: 20130814063812

Steps to reproduce:

Create two or more elements, use css to apply a perspective to their container, and give them an x or y rotation. 


Actual results:

If they are overlapping, chances are that they will not overlap correctly. This can make more complicated css transforms look really messy. For a live example, see http://jsfiddle.net/Lf3Ah/.


Expected results:

In the above example, the two elements should intersect. I don't know how else to explain it, but it only works correctly in Safari, not Firefox or Google Chrome.

Comment 1

[(mostly gone) XtC4UaLL [:xtc4uall]]

WFM on Windows 7 with Firefox 10 ESR, 17 ESR, 24 ESR and Trunk.
Maybe OSX specific. Can you still repro?

Comment 2

[Tiziana Sellitto [:tiziana]]

Attachment: Comparison Firefox(one the left) - Safari (on the right)

I can already see the difference between Firefox and Safari.
I've attached a screenshot of the current behavior, not sure is the one expected.

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:27.0) Gecko/20100101 Firefox/27.0

Comment 3

[(mostly gone) XtC4UaLL [:xtc4uall]]

Ok, thanks. Seeing this now too.
In addition of Chrome rendering like Firefox, MSIE 11 is doing the same.

Comment 4

[scripter]

Yes, that's exactly what I meant. The Safari behavior is expected. When one plane passes through another, you would expect the graphics to reflect this. It's surprising that only Safari gets it right.

Comment 5

[Adam Casey]

bug 725299 also describes this.

Comment 6

[scripter]

Not exactly. This bug has nothing to do with opacity; I just made the divs semi-opaque in order to make the issue more visible. Remove the opacity from the jsFiddle mentioned in the initial comment and you'll notice that it doesn't fix the bug. I am also not using preserve3D. That said, the fact that there is another bug like this shows the general "bugginess" of CSS 3D transforms.

Comment 7

[Brendan Eich [:brendan]]

See http://codepen.io/thebabydino/pen/xbGLXL?editors=110, which cites this bug.

/be

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

duplicate of bug 689498?