Webkit 在使用动画时在 border-radius 上渲染错误

Question

我正在尝试在具有边框半径的元素上实现缩放动画，但它以 webkit 上的别名渲染结束。

HTML :

<ul>
    <li style="transform: rotate(0deg) translateY(-35vh);">
        <span></span>
    </li>
    <li style="transform: rotate(20deg) translateY(-35vh);">
        <span></span>
    </li>
<ul>

CSS :

li{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    list-style: none;
    border-radius: 50%;
    backgroud-color: red;
    -webkit-backface-visibility: hidden;
}

span{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: black;
}

li span.scaleup{
    animation: scaleup 2s 1;
}

@keyframes scaleup{
    10%{
        transform: scale(12);
    }
    100%{ 
        transform: scale(1);
    }
}

不确定是我做错了还是 webkit 错误。

这是我的代码：http://codepen.io/pixelpirate/pen/gpqpQV

Answer 1

发生的事情是浏览器以非常小的尺寸呈现，然后将其作为位图传递给硬件合成以进行缩放。所以你正在放大 5px 版本，因此你看到的效果。

您可以通过相反的方式来解决这个问题 - 从大尺寸渲染开始...

li{
    width: 60px;
    height: 60px;

并缩小...

  <li style="transform: rotate(0deg) translateY(-35vh) scale(calc(1/12));">
    <span></span>
  </li>
  <li style="transform: rotate(20deg) translateY(-35vh) scale(calc(1/12));">
    <span></span>
  </li>

这是完整的代码 - 您可以通过单击下面的 "Run code snippet" 运行将其内联。更新代码笔：http://codepen.io/anon/pen/bdzEEv

$('button').click(function(){
  
    $('span').addClass('scaleup').bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function (e){
     $(this).removeClass();
 });
});

body{
  background: white;
}
button{
  margin: 40px auto;
  display: block;
  width: 150px;
  height: 35px;
}
ul{
  position: relative;
  border-radius: 50%;
  width: 70vh;
  height: 70vh;
  margin-top: 15vh;
  margin-left: calc(50vw - (70vh)/2);
  padding: 0;
}

li{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: red;
    list-style: none;
    -webkit-backface-visibility: hidden;
}
span{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: black;
}
li span.scaleup{
 animation: scaleup 2s 1;
}

@keyframes scaleup{
  10%{
   transform: scale(12);
  }
  100%{ 
   transform: scale(1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Toggle</button>
<ul>
  <li style="transform: rotate(0deg) translateY(-35vh) scale(calc(1/12));">
    <span></span>
  </li>
  <li style="transform: rotate(20deg) translateY(-35vh) scale(calc(1/12));">
    <span></span>
  </li>
<ul>

Webkit 在使用动画时在 border-radius 上渲染错误

Webkit render bug on border-radius when using animation

css

rendering

webkit

css-animations