CSS动画残留像素碎片

Question

我注意到在从屏幕的一侧到另一侧的大小和框阴影的简单CSS动画之后留下的残留像素碎片。

以下是 Code Pen ，因此您可以看到它的实际效果，在Chrome 66中看起来像这样：

无论如何要删除这些剩余的碎片吗？

以下是代码：

* {
  
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

#container {
  
  display: flex;
  align-items: center;
  height: 100vh;
}
  
#box {
    
  position: relative;
  width: 150px;
  height: 150px;
  animation: move 2s infinite alternate ease-in-out;
}

@keyframes move {
  
  0% {
    
    left:  0;
    background-color: blue;
    border-radius: 0;
  }
  
  100% {
    
    left: calc(100vw - 270px);
    background-color: red;
    border-radius: 50%;
    box-shadow:
      0 0 0 20px black,
      0 0 0 40px cyan,
      0 0 0 60px yellow,
      0 0 0 80px pink,
      0 0 0 100px gray,
      0 0 0 120px blue;
  }
}

<div id="container">
  <div id="box">
  </div>
</div>

Answer 1

看起来像在overflow: hidden;元素上使用#box时消失的渲染错误：

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

#container {
  display: flex;
  align-items: center;
  height: 100vh;
}

#box {
  overflow: hidden;
  position: relative;
  width: 150px;
  height: 150px;
  animation: move 2s infinite alternate ease-in-out;
}

@keyframes move {
  0% {
    left: 0;
    background-color: blue;
    border-radius: 0;
  }
  100% {
    left: calc(100vw - 250px);
    background-color: red;
    border-radius: 50%;
    box-shadow: 0 0 0 20px black, 0 0 0 40px cyan, 0 0 0 60px yellow, 0 0 0 80px pink, 0 0 0 100px gray, 0 0 0 120px blue;
  }
}

＆＃13;

<div id="container">
  <div id="box">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我在chrome中遇到过类似的问题，其中大部分都可以通过在元素上添加transform:translateZ(0);来修复。添加transform:translateZ(0);似乎在这里工作。 More about translateZ(0)

＆＃13;

＆＃13;

* {
  
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

#container {
  
  display: flex;
  align-items: center;
  height: 100vh;
}
  
#box {
    
  position: relative;
  width: 150px;
  height: 150px;
  animation: move 2s infinite alternate ease-in-out;
  transform:translateZ(0);
}

@keyframes move {
  
  0% {
    
    left:  0;
    background-color: blue;
    border-radius: 0;
  }
  
  100% {
    
    left: calc(100vw - 250px);
    background-color: red;
    border-radius: 50%;
    box-shadow:
      0 0 0 20px black,
      0 0 0 40px cyan,
      0 0 0 60px yellow,
      0 0 0 80px pink,
      0 0 0 100px gray,
      0 0 0 120px blue;
  }
}

＆＃13;

<div id="container">
  <div id="box">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;