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

Question

我制作了一个半透明的 sprite png 可以在 https://www.srf.ch/static/srf-data/test_sprite.png 找到这是一个 17280 像素高和 910 像素宽的 png (30 * 576 = 17280) - 一切似乎都是正确的。

我现在想使用 background-position.

使用 CSS3 关键帧遍历每个帧（它应该是一个稍微移动点的地图）

我改编了一个例子 https://builtvisible.com/3-logical-alternatives-to-animated-gifs/ (see http://codepen.io/tombennet/pen/oxmaLd)

我可以重现那个例子，当我试着让它适应我的需要时（即我的精灵），我得到这个：http://codepen.io/anon/pen/rmwwMG

Now: 在IE11, Windows 7 上，这个东西上下跳动非常轻微。在 FF 或 Chrome 中它显示正确。

让我吃惊的是，最初示例中的 Ninja 家伙不会跳，他似乎工作正常。我想知道我的 sprite/css 有什么不同。

Answer 1

On IE11, Windows 7, this thing is jumping very slightly up and down. In FF or Chrome it is displaying correctly.

我猜这个问题是由不同浏览器处理浮点数舍入的方式引起的。 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 中摇摆不定/跳跃

Sprite animation wobbly / jumping in IE11

css

css-sprites

sprite

css-animations

internet-explorer-11

如何解决问题