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

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 ......),它现在可能是一个小解决方案.

有人知道这个bug吗？

在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

看起来像是 Mac Safari 的问题，

我删除了修复 Safari 上跳跃问题的-webkit-transform属性，并且在 Chrome 上也能正常工作。keyframes试试这个代码，

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