- From: Aryeh Gregor <ayg@aryeh.name>
- Date: Fri, 24 Feb 2012 09:36:32 -0500
- To: Brian Birtles <birtles@gmail.com>
- Cc: www-style@w3.org
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