779404 - Rendering glitch with 3d transforms

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[Isaac Shapira]

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]

"position" not "opposition". Damn spell check!

Comment 2

[Matthias Versen [:Matti]]

The URL requires a authentication ...

Comment 3

[Isaac Shapira]

@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]

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]

I will build a minimal test case to help debug. Atleast you where able to reproduce it.

Comment 6

[Isaac Shapira]

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]

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]

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]

Attachment: snapshot of bug occurring durring an animation.

Comment 10

[Loic]

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