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

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Jack Bates [:nottheoilrig]]

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

Comment 1

[Boris Zbarsky [:bzbarsky]]

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?

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

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?

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

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.

Comment 4

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

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.