Closed
Bug 790239
Opened 12 years ago
Closed 9 years ago
CSS3 3D transitions flicker when used with box-shadow
Categories
(Core :: Layout, defect)
Tracking
()
RESOLVED
WORKSFORME
People
(Reporter: rodik, Unassigned)
References
Details
(Keywords: regression)
Attachments
(3 files)
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.89 Safari/537.1
Steps to reproduce:
JSFiddle: http://jsfiddle.net/7eDkb/1/
Positioned several div elements in a "coverflow" arrangement with jquery using css (-moz-transform with 3d translations).
upon clicking a div, the selected div moves using -moz-transition to the center of the screen, and the other divs are then moved to the sides, zoomed out and rotated slightly. (also using css transform and transition).
the divs have a background image and a box-shadow.
Actual results:
when clicking the divs, they transition to their places, but they flicker (become invisible and visible rapidly) during the animation.
removing the box-shadow from the elements completely removes this issue. (as shown here: http://jsfiddle.net/7eDkb/2/ )
Expected results:
The divs should have transitioned without flickering, when they have the box-shadow css property. (works in chrome)
Comment 1•12 years ago
|
||
I can reproduced in Firefox12 and later.
Regression window(m-c)
Good:
http://hg.mozilla.org/mozilla-central/rev/1cdef0321abd
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:13.0a1) Gecko/20120202 Firefox/13.0a1 ID:20120202010526
Bad:
http://hg.mozilla.org/mozilla-central/rev/005980552224
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:13.0a1) Gecko/20120202 Firefox/13.0a1 ID:20120202022426
Pushlog:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=1cdef0321abd&tochange=005980552224
Regression window(m-i)
Good:
http://hg.mozilla.org/integration/mozilla-inbound/rev/587eea31cfa1
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:13.0a1) Gecko/20120131 Firefox/13.0a1 ID:20120131223139
Bad:
http://hg.mozilla.org/integration/mozilla-inbound/rev/de8e1de24f37
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:13.0a1) Gecko/20120131 Firefox/13.0a1 ID:20120201021727
Pushlog:
http://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=587eea31cfa1&tochange=de8e1de24f37
Suspected:
a8b8c4489e4e Chris Lord — Bug 722325 - Revert bug 720987 for transformed frames. r=roc The fix checked in for bug 720987 caused a major rendering regression with native fennec. Revert it for transformed frames until the correct fix is found.
Blocks: 722325
Status: UNCONFIRMED → NEW
Component: Untriaged → Layout
Ever confirmed: true
Keywords: regression
Product: Firefox → Core
Assignee: nobody → chrislord.net
Assignee: chrislord.net → matspal
Firefox: 45.0.1, Build ID: 20160315153207
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0
Hi,
I have tested this issue on the latest Firefox (45.0.1) release, latest Nightly (48.0a1 - Build ID: 20160321030217) and the flickering issue is no longer reproducible. I have tested this issue using both provided test cases form comment 0. In Firefox (45.0.1) works properly, but in latest Nightly it seems that you can move the div elements only to the right. When you click on the left div elements, they don't move.
I have performed a regression and this is the pushlog: https://goo.gl/RwCCig.
Last good revision: 6c49bb716593014c07d3736ea2124f74bfe3bb06
First bad revision: 691f2e687e46d1b166b88b0a3f9dbd480bff9afa
Thanks,
Cosmin.
Updated•9 years ago
|
Assignee: mats → nobody
Bug is fixed.
(In reply to Cosmin Muntean [:CosminMCG] from comment #2)
> but in latest Nightly it
> seems that you can move the div elements only to the right. When you click
> on the left div elements, they don't move.
I filed bug 1258884 for that.
Status: NEW → RESOLVED
Closed: 9 years ago
Resolution: --- → WORKSFORME
Comment 6•9 years ago
|
||
As what had mentioned on bug 1258884, background of .coverflowSlider would intercept events. This page set a correct transform to move the background of .coverflowSlider to the back of children.
Comment 7•9 years ago
|
||
Rodik, do you know of any real-world sites that involve this sort of coverflow styling? (maybe a site that you develop and/or use? I'm guessing that'd be how you ran into this bug.)
If so: please let us know, as we'll probably need to reach out to those sites (maybe via you! :)) to address bug 1258884. As Thinker hinted at, I believe we've determined that your "coverflow" demo accidentally depends on a stacking-order bug, and current Nightly behavior (with clicks on the left side of the demo getting blocked/discarded) is actually correct.
Any sites that depend on something like this demo will probably need updating along the lines of thinker's recently-attached fixed demo here.
Flags: needinfo?(rodik)
Reporter | ||
Comment 8•9 years ago
|
||
Hey Daniel, fortunately, the coverflow which I wrote for a project at a previous job is not in use anymore :)
It's safe to assume that you will probably not find any more cases of it in the wild.
Flags: needinfo?(rodik)
You need to log in
before you can comment on or make changes to this bug.
Description
•