Last Comment Bug 779404 - Rendering glitch with 3d transforms
: Rendering glitch with 3d transforms
: regression
Product: Core
Classification: Components
Component: Layout (show other bugs)
: 14 Branch
: All All
: -- normal (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
: Jet Villegas (:jet)
Depends on: 772079
  Show dependency treegraph
Reported: 2012-07-31 21:46 PDT by Isaac Shapira
Modified: 2012-08-02 00:32 PDT (History)
3 users (show)
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---

snapshot of bug occurring durring an animation. (511.58 KB, image/png)
2012-08-01 08:58 PDT, Isaac Shapira
no flags Details

Description Isaac Shapira 2012-07-31 21:46:03 PDT
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.

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.
Comment 1 Isaac Shapira 2012-07-31 21:47:51 PDT
"position" not "opposition". Damn spell check!
Comment 2 Matthias Versen [:Matti] 2012-07-31 23:19:40 PDT
The URL requires a authentication ...
Comment 3 Isaac Shapira 2012-07-31 23:45:03 PDT
@Matthias. It's been taken down while we figure out how to deal with this bug. Please see my localbox here:
Comment 4 Loic 2012-08-01 00:48:32 PDT
Not sure, but it could be a dupe of
Is it possible to attach a minimal testcase (just the 3D transforms element) to check if that's the case?
Comment 5 Isaac Shapira 2012-08-01 08:04:44 PDT
I will build a minimal test case to help debug. Atleast you where able to reproduce it.
Comment 6 Isaac Shapira 2012-08-01 08:43:49 PDT
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.
Comment 7 Isaac Shapira 2012-08-01 08:50:12 PDT
Ok here is one example: I was having the same kind of bug occurring with outlines, but with images and text on my production site.
Comment 8 Isaac Shapira 2012-08-01 08:56:43 PDT
I made a screencast to show the bug in my production environment. 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.
Comment 9 Isaac Shapira 2012-08-01 08:58:55 PDT
Created attachment 647967 [details]
snapshot of bug occurring durring an animation.
Comment 10 Loic 2012-08-01 10:55:44 PDT
Thanks for the testcase. It's pretty similar to bug 775592. Opacity is involved, see comment

Anyway I tried your testcase with the latest Nightly and the rendering bug is gone (no more broken solids as tracers behind), probably according to comment

Note You need to log in before you can comment on or make changes to this bug.