CSS-анимация Остаточные пиксельные фрагменты

Question

Я заметил остаточные пиксельные фрагменты, оставшиеся после простой CSS-анимации размера и теней от одной стороны экрана до другой.

Вот кодовое , чтобы вы могли увидеть его в действии, и в 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:

* {
  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;
  }
}

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

Answer 2

Я видел похожие проблемы в chrome, и большинство из них можно исправить, добавив transform:translateZ(0); к элементу.Добавление transform:translateZ(0);, кажется, работает здесь. Подробнее о translateZ (0)

* {
  
  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;
  }
}

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