Closed Bug 779404 Opened 12 years ago Closed 12 years ago

Rendering glitch with 3d transforms

Categories

(Core :: Layout, defect)

14 Branch
defect
Not set
normal

Tracking

()

RESOLVED FIXED

People

(Reporter: fresheyeball, Unassigned)

References

()

Details

(Keywords: regression)

Attachments

(1 file)

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.57 Safari/537.1 Steps to reproduce: I have been using 3d transforms on our html5 site for some time now. With the release of firefox 14 they are all broken to hell. http://www.radiantinteractive.com/rs/home/allies Actual results: The graphics are completely broken. Transforming elements leave noticeable 'tracers' of their opposition. In firefox 13 this was not an issue. Expected results: Smooth animation.
OS: Mac OS X → All
Hardware: x86 → All
"position" not "opposition". Damn spell check!
The URL requires a authentication ...
@Matthias. It's been taken down while we figure out how to deal with this bug. Please see my localbox here: http://24.8.192.155:8080/rs/home/index
Not sure, but it could be a dupe of https://bugzilla.mozilla.org/show_bug.cgi?id=775592 Is it possible to attach a minimal testcase (just the 3D transforms element) to check if that's the case?
I will build a minimal test case to help debug. Atleast you where able to reproduce it.
I am making a jsfiddle, but having a hard time recreating the bug in a simple example. However I have learned that it is the combination of animating Opacity and animating -moz-transform rotateY(#deg) with javascript.
Summary: Massive rendering glitch with 3d transforms → Rendering glitch with 3d transforms
Ok here is one example: http://jsfiddle.net/FcdGM/2/ I was having the same kind of bug occurring with outlines, but with images and text on my production site.
I made a screencast to show the bug in my production environment. http://c975805.r5.cf2.rackcdn.com/firefox14.mov You can see that in firefox 14 (shown first) the 3d rotation of elements leaves broken solids as tracers behind, while in chrome (shown second) I get the same glitch less behavior I had with firefox 13.
Thanks for the testcase. It's pretty similar to bug 775592. Opacity is involved, see comment https://bugzilla.mozilla.org/show_bug.cgi?id=775592#c10 Anyway I tried your testcase http://jsfiddle.net/FcdGM/2/ with the latest Nightly and the rendering bug is gone (no more broken solids as tracers behind), probably according to comment https://bugzilla.mozilla.org/show_bug.cgi?id=775592#c12
Status: UNCONFIRMED → NEW
Component: Untriaged → Layout
Ever confirmed: true
Keywords: regression
Product: Firefox → Core
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
Depends on: 772079
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: