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

UNCONFIRMED
Unassigned

Status

()

Core
Layout: View Rendering
UNCONFIRMED
6 years ago
6 years ago

People

(Reporter: blechri, Unassigned)

Tracking

11 Branch
x86_64
Linux
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(1 attachment)

310.24 KB, application/octet-stream
Details
(Reporter)

Description

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

Updated

6 years ago
tracking-firefox10: --- → ?
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
Removing tracking-firefox10 flag, since this the appears to be a problem with WebKit not following the spec.
tracking-firefox10: ? → ---
You need to log in before you can comment on or make changes to this bug.