749761 - 3d css doesn't render correctly?

Status: VERIFIED WORKSFORME

(Core :: Graphics, defect)

Description

[Gregg Tavares]

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

Steps to reproduce:

Made this page
http://greggman.github.com/webgl-fundamentals/lessons/resources/axis-diagram.html


Actual results:

Much of it does not render


Expected results:

I'm pretty sure it should render though it's possible I don't understand 3d css enough to know why it renders in Chrome and Safari but not Firefox.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Aryeh, any idea what's up here?

Comment 2

[Matt Woodrow (:mattwoodrow)]

This looks similar to bug 749634. I'm working on it!

Comment 3

[Matt Woodrow (:mattwoodrow)]

The fixes from bug 749634/ bug 722603 fix the flickering here.

The problem is that the .plane style doesn't have -moz-transform-style: preserve-3d. Adding this makes the test render correctly.

I don't know why this works as expected in WebKit, -moz-transform-style shouldn't be inherited.

Aryeh: This might be worth checking, WebKit might be doing the same as perspective here.

Comment 4

[Gregg Tavares]

I'm not sure. 

Here's like one of the very original 3d css demos with -moz- added
http://greggman.com/downloads/examples/morphing-power-cubes.html

It doesn't render quite correct in Firefox. Is it possible it's been wrong from the beginning?

Looking at the 3d css spec, preserve-3d effects children so it seems like both the original sample and this one are correct. The DOM hierarchy in both is

body
__continainer
____stage
______shape
________plane
________plane
________plane
...

shape has -moz-transform-style: preserve-3d which if I understand the spec correctly means each of its children will have their 3d preserved.

http://www.w3.org/TR/css3-3d-transforms/#transform-style-property

Comment 5

[Matt Woodrow (:mattwoodrow)]

What is wrong with the power cubes demo exactly? It looks correct to me.

The mentioned part of the DOM hierarchy is correct, but 'plane' doesn't have preserve-3d so children of that (elemN) don't get their transforms included.

Most of these children have singular transforms (rotate{X|Y}(90deg)), and don't get drawn.

Adding preserve-3d to 'plane' means that these transforms get included into the preserve-3d hierarchy, and end up being visible again.

Comment 6

[Gregg Tavares]

Attachment: firefox morphing cubes

Comment 7

[Gregg Tavares]

Attachment: webkit-morphing cubes

Comment 8

[Gregg Tavares]

See the 2 attached screenshots for issues with "morphing power cube"

Comment 9

[Gregg Tavares]

fixed the axis-diagram to add transform-style: preserve-3d to "plane" so now the only issue is the arrows flicker in and out on the first 2 cubes.

I'll follow up on Webkit for why it was working before when it shouldn't have.

Comment 10

[Matt Woodrow (:mattwoodrow)]

Ah, good point, no perspective.

-moz-perspective: 800ox; - Should be 'px'. Looks correct with that change.

The flickering will be fixed once those other bugs are completed.

Comment 11

[Gregg Tavares]

Sorry about that typo :-(

If you're curious the WebKit bug is
https://bugs.webkit.org/show_bug.cgi?id=85261

Comment 12

[Gregory Pappas [:gregp]]

Reporter, are you still experiencing this issue?

Comment 13

[Gregg Tavares]

no

Comment 14

[Gregory Pappas [:gregp]]

Thanks for confirming!