Re: [css3-transitions] Rounding behaviour

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