Question

我想我在动画中发现了一个与Safari上百分比相关的错误。我想知道它是真的是一个bug还是一个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而不是％

＆＃13;

    var div = document.createElement('div');


    setTimeout( function(){
        document.body.appendChild(div);
    }, 500);

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

通过JavaScript添加Safari / iOS添加百分比的Bug动画

2 个答案: