Animation error in translation with percentage on adding Safari / iOS via JavaScript

Question

I think I found an error related to percentages in Safari in the animation. I would like to know if this is really a bug or a custom Safari.

Error explanation:

In Safari or iOS, when you start an animation with translation with percent, the position is wrong, and the animation is shown elsewhere.

In the following example, the square should not be moved, because the transformation is the same and should begin with a 10% "margin" of its size. The error occurs when it is added via JavaScript after some time (for example, 500 ms).

If you see an error, you will see a transition from 0 0 to 10% 10% in Safari and iOS.

var div = document.createElement('div');


setTimeout( function(){
  document.body.appendChild(div);
}, 500);

  div {
    background: red;
    
    width: 200px;
    height: 200px;

    -webkit-transform:  translate(10%, 10%);
    -webkit-animation: 1s bugAnimation;
  }


@-webkit-keyframes bugAnimation {
  from {
    -webkit-transform: translate(10%, 10%);
    background: blue; /* To see the animation */
  }
  to {
    -webkit-transform: translate(10%, 10%);
    background: red; /* To see the animation */
  }
}

Run codeHide result

Possible solutions:

• Change percentages by view or other.

, , , , div (vw, vh, px...).

- ?

Safari 10.1.1 iOS 9.3.1 ( -).

EDIT: translate2D, DIV , :

var div = document.createElement('div');


setTimeout( function(){
  document.body.appendChild(div);
}, 500);

  div {
    background: red;
    
    width: 200px;
    height: 200px;
    position: fixed;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
    -webkit-animation: 1s bugAnimation;
    -webkit-transform-origin: center center;
  }


@-webkit-keyframes bugAnimation {
 from {
    -webkit-transform: rotate(0deg) translate(-50%, -50%);
  }
  to {
    -webkit-transform: rotate(360deg) translate(-50%, -50%);
  }
}

Hide result

Answer 1

, em %

    var div = document.createElement('div');


    setTimeout( function(){
        document.body.appendChild(div);
    }, 500);

  div {
    background: red;
    
    width: 200px;
    height: 200px;

    -webkit-animation: 1s bugAnimation forwards;
  }


@-webkit-keyframes bugAnimation {
  from {
    -webkit-transform: translate(0, 0);
    background: blue; /* To see the animation */
  }
  to {
    -webkit-transform: translate(1.3em, 1.3em);
    background: red; /* To see the animation */
  }
}

Hide result

, , . , . , , . , :

    setTimeout(function() {
        document.getElementById("div").classList.add("animated");
    }, 1000);

    div {
        background: red;

        width: 200px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;

        -webkit-transition: transform 1s;
        -moz-transition: transform 1s;
        -ms-transition: transform 1s;
        -o-transition: transform 1s;
        transition: transform 1s;
    }

    .animated {
        transform: translate(-50%, -50%) rotate(360deg);
    }

<div id="div"></div>

Hide result

Answer 2

Mac Safari,

-webkit-transform keyframes, Safari, Chrome. ,

var div = document.createElement('div');


setTimeout( function(){
  document.body.appendChild(div);
}, 500);

div {
    background: red;
    
    width: 200px;
    height: 200px;
    -webkit-transform:  translate(10%, 10%);
    -webkit-animation: 1s bugAnimation;
  }


@-webkit-keyframes bugAnimation {
  from {
    background: blue; /* To see the animation */
  }
  to {
    background: red; /* To see the animation */
  }
}

Hide result