CSS3 3D transitions flicker when used with box-shadow

RESOLVED WORKSFORME

Status

()

Core
Layout
RESOLVED WORKSFORME
5 years ago
a year ago

People

(Reporter: Rodik Hanukaev, Unassigned)

Tracking

({regression})

13 Branch
x86_64
Windows 7
regression
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments)

(Reporter)

Description

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

5 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

Updated

5 years ago
Version: 15 Branch → 13 Branch
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.
Assignee: mats → nobody

Comment 3

a year ago
Created attachment 8733611 [details]
250x150.png

Comment 4

a year ago
Created attachment 8733614 [details]
index.html

Comment 5

a year ago
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
Last Resolved: a year ago
Resolution: --- → WORKSFORME
Created attachment 8736626 [details]
correct-transform.html

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.
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

a year 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.