CSS Animation Residual Pixel Fragments

  • A+
Category:Languages

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:

CSS Animation Residual Pixel Fragments

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>


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>

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: