Question

我构建了一个半透明的sprite png，可以在https://www.srf.ch/static/srf-data/test_sprite.png找到这是一个17280px高和910px宽png（30 * 576 = 17280） - 一切似乎都正确。

我现在想要使用background-position使用CSS3关键帧遍历每个帧（它应该是一个略微移动的点的地图）。

我改编了https://builtvisible.com/3-logical-alternatives-to-animated-gifs/的示例（请参阅http://codepen.io/tombennet/pen/oxmaLd）

我可以重现那个例子，当我尝试根据我的需要调整它时（即我的精灵），我得到了这个：http://codepen.io/anon/pen/rmwwMG

现在：在 IE11 ，Windows 7上，这个东西上下跳跃。在FF或Chrome中，它正确显示。

令我吃惊的是，最初例子中的忍者不跳，他似乎工作正常。我想知道我的精灵/ css有什么区别。

Answer 1

在IE11，Windows 7上，这个东西上下跳跃。在FF或Chrome中，它正确显示。

我的猜测是问题是由不同浏览器处理浮点数舍入的方式引起的。 IE11（以及Edge）在第二个小数位后截断，这使得定位有时不精确。有很多关于这种行为的抱怨，例如，构建具有百分比值的布局网格（列）需要一些额外的黑客来将列的宽度添加到100％。

在Firefox（53）和Chrome（57）中，该数字四舍五入至少为第四个小数。这会在您的示例中产生明显的差异。如果我们有29个步骤，则每个步骤将背景图像移动3.448...%，因此在6个步骤之后，该值应为20.6896...%。我采取了这个具体步骤，因为我们得到IE11（20.68%）中显示的实际值和可见值之间的最大差异。这会导致~1.67px的不准确。平均而言，此示例中的0.86px不准确。

在忍者示例中它不闪烁的原因是不准确度较低（由于与752px相比17280px的图像高度较小;请注意图像的高度乘以百分比值，以便更高的像素值具有更大的影响）。实际值与呈现值之间的最大差异仅为0.0752px，平均而言，我们在忍者示例中只有0.0376px的不准确度。

如何解决问题

在这种情况下，依靠浮点数非常简单。我们将背景图片移动576px 30步：

.test {
  width: 910px;
  height: 576px;
  background:  url('https://i.stack.imgur.com/Tsw6G.png') no-repeat 0 0%;
  animation: sprite 1s steps(30) infinite;
}

@keyframes sprite {
  from { background-position: 0 0px; }
  to { background-position: 0 -17280px; }
}

<div class="test"></div>

精灵动画在IE11中摇摆不定/跳跃

1 个答案:

如何解决问题