Upon viewing the jsfiddle, it's evident that this animation experiences flickering in webkit browsers. Regardless of whether the animation is set to repeat infinitely or not, the issue persists. How can this problem be resolved? I've spent hours attempting various solutions without success. None of the usual techniques seem to apply to this particular scenario. Appreciate any insights you may have.
The following is the code snippet:
body {
background-color: #000;
}
#box {
width: 200px;
height: 200px;
top:20px;
left:20px;
position:absolute;
border: 1px solid red;
-webkit-animation: box 20s linear infinite normal;
}
@-webkit-keyframes box {
0% {-webkit-transform: translate(0,100px);}
50% {-webkit-transform: translate(100px,0);}
100% {-webkit-transform: translate(0,100px);}
}
UPDATE: Following advice from RCorrie, adjusting my monitor's color settings managed to resolve the issue!