Bug animation in translate with percentage on Safari/iOS adding via JavaScript

Question

I think I found a bug related with percentages on Safari in the animations. I would like to know if really it is a bug or a Safari custom.

Explanation of the bug:

On Safari or iOS when you start an animation with a translate with percentages, the position is wrong and the animation is shown in another place.

In the next example, the square should not move because the transform is the same and it should start with a 10% 10% "margin" of its size. The bug occurs when it is adding via JavaScript after some time (like 500 ms).

If you see the bug, you will see a jump 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 */
  }
}

Possible solutions:

• Changing the percentage values by viewport units or another.

Obviously that options is not valid for all cases because I need the percentage but it could be a small solution for now if I know the size of the div (vw, vh, px...).

Do somebody know this bug?

Tested on Safari 10.1.1 and iOS 9.3.1 (with webview).

EDIT: Really I need the translate2D because I am rotating a DIV in the center of the page and the size is unknown, an example:

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%);
  }
}

Answer 1

Ok, a workaround maybe using em instead of %

    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 */
  }
}

Ok, please take another look at that approach. I wondered why you are using keyframed animation. Maybe the example is not representative but in this case you can just animate with a simple transition. Please take another look here:

    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>