Rendering glitch with 3d transforms

RESOLVED FIXED

Status

()

Core
Layout
RESOLVED FIXED
5 years ago
5 years ago

People

(Reporter: Isaac Shapira, Unassigned)

Tracking

({regression})

14 Branch
regression
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(1 attachment)

(Reporter)

Description

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

Updated

5 years ago
OS: Mac OS X → All
Hardware: x86 → All
(Reporter)

Comment 1

5 years ago
"position" not "opposition". Damn spell check!
The URL requires a authentication ...
(Reporter)

Comment 3

5 years ago
@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

5 years ago
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?
(Reporter)

Comment 5

5 years ago
I will build a minimal test case to help debug. Atleast you where able to reproduce it.
(Reporter)

Comment 6

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

Updated

5 years ago
Summary: Massive rendering glitch with 3d transforms → Rendering glitch with 3d transforms
(Reporter)

Comment 7

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

Comment 8

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

Comment 9

5 years ago
Created attachment 647967 [details]
snapshot of bug occurring durring an animation.
(Reporter)

Updated

5 years ago

Comment 10

5 years ago
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
Last Resolved: 5 years ago
Resolution: --- → FIXED

Updated

5 years ago
Depends on: 772079
You need to log in before you can comment on or make changes to this bug.