Percentage background-position working erratically (except on Chromium)
<p>The following image is to be used in a <code>keyframes</code> animation by moving the background-image position 100% to the right on each frame:</p>

<p><a href="https://i.stack.imgur.com/Tsadg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tsadg.png" alt="enter image description here"></a></p>

<p>The idea is that the <code>ArrowsAnim.png</code> has 7 frames of the same image (the set of 3 chevrons pointing to the right) in different animation states. The animation <code>arrowAnimation</code> (CSS below) simply skips through <code>background-position</code> 0% to 300% to show the first three frames of this image over 0.5 seconds, repeatedly.</p>

<p>What's happening is that when I resize the browser window, I can sometimes see some pixels of the next or previous frame of the animation, instead of having the background perfectly centered around whichever should be the current block, as you can see in the next picture:</p>

<p><a href="https://i.stack.imgur.com/MEfcQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MEfcQ.png" alt="enter image description here"></a></p>

<p>So for some reason, <code>background-position</code> is not being calculated correctly.</p>

<p>I also cannot reproduce this issue on Chromium, but I can do so on Chrome, Firefox and Edge.</p>

<p>CSS:</p>

<pre><code>#autoplay-arrow {
  display: inline-block;
  position: absolute;
  width: 5.91549%;
  top: 22.05882%;
  height: 50.74627%;
  margin-left: 18.30986%;
  background-size: 100% 100%;
  background-position: 0 0;
  background-image: url(../graphics/Arrows_002.png);
}
@-moz-keyframes arrowAnimation {
  from {
    background-position: 300% 0%;
  }
  to {
    background-position: 0% 0%;
  }
}
@-webkit-keyframes arrowAnimation {
  from {
    background-position: 300% 0%;
  }
  to {
    background-position: 0% 0%;
  }
}
@keyframes arrowAnimation {
  from {
    background-position: 300% 0%;
  }
  to {
    background-position: 0% 0%;
  }
}
#autoplay-arrow.anim {
  background-image: url(../graphics/ArrowsAnim.png);
  background-size: 700% 100%;
  -moz-animation: arrowAnimation 0.5s steps(3) infinite;
  -webkit-animation: arrowAnimation 0.5s steps(3) infinite;
  animation: arrowAnimation 0.5s steps(3) infinite;
}
</code></pre>