- From: Øyvind Stenhaug <oyvinds@opera.com>
- Date: Fri, 24 Feb 2012 16:48:12 +0100
- To: "Brian Birtles" <birtles@gmail.com>, "Aryeh Gregor" <ayg@aryeh.name>
- Cc: www-style@w3.org
On Fri, 24 Feb 2012 15:36:32 +0100, Aryeh Gregor <ayg@aryeh.name> wrote: > 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; > } > 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. Well, for starters those are animations, not transitions. <!DOCTYPE html> <title>Rounding behavior of transitioned z-index</title> <style> div { background: blue; position: absolute; top: 100px; width: 100px; height: 100px; -moz-transition-duration: 3s; -moz-transition-timing-function: steps(3); -ms-transition-duration: 3s; -ms-transition-timing-function: steps(3); -o-transition-duration: 3s; -o-transition-timing-function: steps(3); -webkit-transition-duration: 3s; -webkit-transition-timing-function: steps(3); left: 0; z-index: 1; } div.testing { left: 300px; z-index: 2; } #ref { left: 200px; background: gray; z-index: 2; } </style> <script> onload = function() { setTimeout(function() { document.querySelector('#test').className = 'testing'; }, 100); } </script> <p>Does the blue go on top (round) or below (floor) the gray?</p> <div id="ref"></div> <div id="test"></div> -- Øyvind Stenhaug Core Norway, Opera Software ASA
Received on Friday, 24 February 2012 15:48:46 UTC