705410 - CSS 3D photo rollover effect doesn't render correctly in Nightly

Status: UNCONFIRMED

Description

[blechri]

Created attachment 577044 [details]
rollover.ogv

User Agent: Mozilla/5.0 (Ubuntu; X11; Linux x86_64; rv:11.0a1) Gecko/20111126 Firefox/11.0a1
Build ID: 20111126041059

Steps to reproduce:

Tried the CSS3 3D transforms effect that is talked about and demoed here: http://christianheilmann.com/2011/11/14/fun-with-3d-transforms-and-rollovers-kittens-in-space/
You can test it here: http://thewebrocks.com/demos/3D-photo-rollover/
I am using latest Nightly build on Linux (Ubuntu 11.10 - 64 bit)


Actual results:

The 3d effect does not look like the example on the demo page (which it does in google chrome on the same machine). I am attaching a screencapture of what it looks like.


Expected results:

It should look like the example in the video on the demo-page above.

---
I first thought it was related to the bug 701656 but that demo is now rendering correctly for me (except for opacity (no transperancy)), so this is probably unrelated.
---
Not sure what component to set this as.

Comment 1

[Matt Woodrow (:mattwoodrow)]

This is because the element with perspective (image3d) isn't a direct parent of the transformed element (img).

WebKit seems to be accepting this, which appears to be incorrect with the current spec.

Spec: http://dev.w3.org/csswg/css3-3d-transforms/#perspective

I've sent an email to www-style to clarify whether this is a spec bug, or a WebKit bug.

http://lists.w3.org/Archives/Public/www-style/2011Nov/0244.html

Comment 2

[Matt Woodrow (:mattwoodrow)]

Removing tracking-firefox10 flag, since this the appears to be a problem with WebKit not following the spec.