javascript - CSS Animation Residual Pixel Fragments - Stack Overflow

I've noticed residual pixel fragments left behind after a simple CSS animation of size and box shadows from one side of the screen to the other.

Here is the Code Pen so you can see it in action, and it looks like this in Chrome 66:

Is there anyway to remove these leftover fragments?

Here is the code:

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

I've noticed residual pixel fragments left behind after a simple CSS animation of size and box shadows from one side of the screen to the other.

Here is the Code Pen so you can see it in action, and it looks like this in Chrome 66:

Is there anyway to remove these leftover fragments?

Here is the code:

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

• javascript
• html
• css
• animation

Share Follow edited Apr 25, 2018 at 16:54 Chunky Chunk asked Apr 25, 2018 at 16:37 Chunky ChunkChunky Chunk 17.2k1717 gold badges9191 silver badges165165 bronze badges 3

• 4 There is no "fragment" for me on Firefox. Looks like a render issue from Chrome. – SystemGlitch Commented Apr 25, 2018 at 16:39
• Can be seen on Chrome – Akshay Commented Apr 25, 2018 at 16:42
• May this is a bug: bugs.chromium/p/chromium/issues/detail?id=691262#c69 – Honsa Stunna Commented Apr 25, 2018 at 16:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Seems like a rendering bug that disappears when using overflow: hidden; on the #box element:

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

I have seen similar problems in chrome and most of them can be fixed by adding transform:translateZ(0); on the element. Adding transform:translateZ(0); does seem to work here. More about 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>