Last Comment Bug 779404 - Rendering glitch with 3d transforms
: Rendering glitch with 3d transforms
Status: RESOLVED FIXED
: 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
:
Mentors:
http://jsfiddle.net/FcdGM/2/
Depends on: 772079
Blocks:
  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:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
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. 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.
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: http://24.8.192.155:8080/rs/home/index
Comment 4 Loic 2012-08-01 00:48:32 PDT
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?
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: 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.
Comment 8 Isaac Shapira 2012-08-01 08:56:43 PDT
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.
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 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

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