css3-animations crossfade doesn't work because z-index:1 doesn't cause animation when base is z-index:auto




CSS Parsing and Computation
6 years ago
6 years ago


(Reporter: nottheoilrig, Unassigned)


12 Branch

Firefox Tracking Flags

(Not tracked)




6 years ago
User Agent: Mozilla/5.0 (X11; Linux i686; rv:12.0a2) Gecko/20120313 Firefox/12.0a2
Build ID: 20120313042010

Steps to reproduce:

I made a simple four image slideshow with CSS animation: http://nottheoilrig.com/slideshow/

I position these four images on top of each other with "position: absolute"

Between key frame 25% and 30%, I animate from "opacity: 1" to "opacity: 0". Opacity remains zero from key frame 30% to 100% ("to")

"animation-duration" is 20 seconds, so image changes every 5 seconds (25%) and crossfade lasts 1 second (25% to 30%)

"animation-delay" is -1 second, -6 seconds, -11 seconds, and -16 seconds, so a different image changes every 5 seconds

Actual results:

First three images crossfade nicely, every 5 seconds. But crossfade is missing between last and first images: Last image changes abruptly to first image with no crossfade

Expected results:

I expected same behavior as WebKit: Every image crossfades with next image. I tested with Chrome version 16
Jack, if you try to do this with just two images instead, do you see a similar effect when coming back to the "first" image?

David, any idea what's going on here?
I'd think the problem likely has something to do with z-ordering.

I'm not sure, but a guess might be that it has something to do with the animation of z-index.  I suspect WebKit is going to do that differently because it has a bug that treats 'auto' as '0' for purposes of animation, whereas we detect that 'auto' is a different thing from a number and refuse to animate.  Maybe puting z-index: 0 and 0% and 100%, or just putting z-index:0 as a style on img, would help?
Two more points:
 * finding something that we can't interpolate in an animation means we don't interpolate that property.  So we're not animating z-index, but WebKit is.
 * it's useful here that integers are animated using floor() rather than round(); otherwise this wouldn't work.

So I suspect that's it and the problem is that you need z-index: 0 as the base rather than z-index: auto.
Yeah, adding z-index: 0 to the img{} rule fixes this.

So our behavior is correct given that:
 (1)  http://dev.w3.org/csswg/css3-transitions/#animation-of-property-types- doesn't describe rules for animating between integers and auto for z-index.

 (2) We implement the proposal here: http://lists.w3.org/Archives/Public/www-style/2011Apr/0645.html which is, as far as I know, the only proposal for what the spec should say on that issue.  Though the issue isn't addressed in the spec yet, and the spec might change.
Last Resolved: 6 years ago
Resolution: --- → INVALID
Summary: CSS animation crossfade → css3-animations crossfade doesn't work because z-index:1 doesn't cause animation when base is z-index:auto
You need to log in before you can comment on or make changes to this bug.