Closed Bug 790239 Opened 12 years ago Closed 9 years ago

CSS3 3D transitions flicker when used with box-shadow

Categories

(Core :: Layout, defect)

13 Branch
x86_64
Windows 7
defect
Not set
normal

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)
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
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
Attached image 250x150.png (deleted) —
Attached file index.html (deleted) —
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
Attached file correct-transform.html (deleted) —
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)
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.

Attachment

General

Creator:
Created:
Updated:
Size: