不正常工作的背景位置百分比（Chromium除外）

Question

通过在每帧上向右移动背景图像位置100％，可以在keyframes动画中使用以下图像：

这个想法是ArrowsAnim.png在不同的动画状态下有7帧相同的图像（指向右边的3个V形符号的集合）。动画arrowAnimation（下面的CSS）只需跳过background-position 0％到300％即可在0.5秒内重复显示此图像的前三帧。

发生的事情是，当我调整浏览器窗口的大小时，我有时会看到动画的下一帧或上一帧的某些像素，而不是将背景完美地定位在当前块的哪一个周围，如你可以在下一张图片中看到：

因此，由于某种原因，background-position未正确计算。

我也无法在Chromium上重现此问题，但我可以在Chrome，Firefox和Edge上重现此问题。

CSS：

#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;
}