After applying a simple CSS animation that moves size and box shadows from one side of the screen to the other, I am noticing residual pixel fragments left behind.
To see this issue in action on Chrome 66, check out the Code Pen:
https://i.sstatic.net/GlHSv.png
Is there a way to remove these leftover fragments?
Below is the code snippet:
*{
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>