Re: [css3-transitions] Rounding behaviour

On Thu, Feb 23, 2012 at 9:10 PM, Brian Birtles <birtles@gmail.com> wrote:
> Dean? David? Any thoughts here?

I tried testing what browsers do with z-index:

<!DOCTYPE html>
<style>
div:first-child {
  -webkit-animation: 7s infinite linear zindex;
  -moz-animation: 7s infinite linear zindex;
}
@-webkit-keyframes zindex { from { z-index: 1} to { z-index: 8 } }
@-moz-keyframes zindex { from { z-index: 1 } to { z-index: 8 } }
</style>
<div style="height:100px;width:100px;background:red;position:absolute;top:0;left:0;z-index:1"></div>
<div style="height:100px;width:100px;background:orange;position:absolute;top:5px;left:5px;z-index:2"></div>
<div style="height:100px;width:100px;background:yellow;position:absolute;top:10px;left:10px;z-index:3"></div>
<div style="height:100px;width:100px;background:green;position:absolute;top:15px;left:15px;z-index:4"></div>
<div style="height:100px;width:100px;background:blue;position:absolute;top:20px;left:20px;z-index:5"></div>
<div style="height:100px;width:100px;background:indigo;position:absolute;top:25px;left:25px;z-index:6"></div>
<div style="height:100px;width:100px;background:violet;position:absolute;top:30px;left:30px;z-index:7"></div>

Firefox seems to follow spec and use floor() -- the red box pauses at
its starting point for two full seconds, because it takes two seconds
to get from 1 to 3; and it never overlays the violet square, because
it only reaches 8 instantaneously and rounds down to 7.  If it rounded
to the nearest integer, it would spend only 1.5 seconds at its
starting point, and would overlay the violet square for half a second
at the end of the sequence.  None of the other browsers I tested in
(IE10 Developer Preview, Chrome 18 dev, Opera Next 12.00 alpha)
animated at all, so I don't think they support z-index transitions.

For this use-case, it would actually be best if z-index were actually
a number, not an integer.  That way it would stay for exactly one
second at each position, which is probably what one would expect.  You
can achieve the same effect right now by specifying an animation range
of 2-9 instead of 1-8.  With your proposed change, you'd have to
specify more than two keyframes, but it wouldn't be complicated.

The behaviors are pretty similar.  I don't think it makes a big
difference, so we may as well be consistent with SMIL.  The affected
properties are probably what?  z-index, column-count, anything else?

Received on Friday, 24 February 2012 14:37:26 UTC