在 Safari/iOS 上通过 JavaScript 添加百分比的翻译错误动画

Question

我想我在动画中发现了一个与 Safari 上的百分比相关的错误。我想知道它是否真的是一个错误或 Safari 自定义。

错误说明：

在 Safari 或 iOS 上，当您使用百分比转换开始动画时，位置错误并且动画显示在另一个位置。

在下一个示例中，正方形不应该移动，因为变换是相同的，并且应该从其大小的 10% 10%“边距”开始。一段时间后（如 500 毫秒）通过 JavaScript 添加时会出现该错误。

如果你看到这个错误，你会在 Safari 和 iOS 中看到从 0 0 到 10% 10% 的跳跃。

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

可能的解决方案：

• 按视口单位或其他单位更改百分比值。

显然，选项并非对所有情况都有效，因为我需要百分比，但如果我知道 div 的大小（vw、vh、px...），现在它可能是一个小解决方案。

有人知道这个错误吗？

在 Safari 10.1.1 和 iOS 9.3.1（带有 webview）上测试。

编辑： 真的我需要 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%);
  }
}

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

好的，请再看看这种方法。我想知道你为什么使用关键帧动画。也许该示例不具有代表性，但在这种情况下，您可以通过简单的过渡进行动画处理。请再看这里：

    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>

Answer 2

看起来像 Mac Safari 问题，

我从keyframes 中删除了-webkit-transform 属性，它修复了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 */
  }
}