雪碧动画摇摆/ IE11中跳跃 [英] Sprite animation wobbly / jumping in IE11

问题描述

我构建了一个半透明的精灵png，可以在 https：中找到： //www.srf.ch/static/srf-data/test_sprite.png
高度为17280px，宽度为910px png（30 * 576 = 17280）-一切似乎正确。

I built a semi-transparent sprite png which can be found at https://www.srf.ch/static/srf-data/test_sprite.png It is a 17280px high and 910px wide png (30 * 576 = 17280) - everything seems correct.

我现在想使用 background-position 。

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

我可以重现该示例，当我尝试使其适应我的需要（即我的精灵），我得到了： http：// codepen。 io / anon / pen / rmwwMG

I can reproduce that example, when I try to adapt it to my needs (i.e. my sprite), I get this: http://codepen.io/anon/pen/rmwwMG

现在：在Windows 7的 IE11 上正在非常轻微地上下跳跃。在FF或Chrome中，它显示正确。

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

让我大吃一惊的是，最初示例中的忍者家伙并没有跳起来，他看起来还不错。我想知道我的sprite / css有什么不同。

What startles me is that the Ninja guy from the initial example doesn't jump, he seems to work fine. I wonder what the difference in my sprite/css is.

推荐答案

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

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

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

My guess is that the issue is caused by the way different browsers handle the rounding of floating point numbers. IE11 (as well as Edge) truncates after the second decimal place which makes the positioning sometimes imprecise. There have been lot of complaints about this behaviour as for example the building of a layout grid (columns) with percentage values requires some additional hacks to add the columns' width to 100%.

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

In Firefox (53) and Chrome (57) the number is rounded to at least the fourth decimal. That makes a visible difference in your example. If we have 29 steps, each step moves the background-image by 3.448...%, so after 6 steps the value should be at 20.6896...%. I took this specific step as here we get the biggest difference between the actual value and the visible value shown in IE11 (20.68%). This results in an inaccuracy of ~1.67px. On average we have an inaccuracy of 0.86px in this example.

忍者的例子是不准确度较低（由于 752px 的图像高度小于 17280px 的图像高度；请注意，图像的高度将乘以百分比值，以便更高的像素值具有更大的影响）。实际值和渲染值之间的最大差值仅为 0.0752px ，平均而言，我们的准确度仅为 0.0376px 以忍者为例。

The reason why it does not flicker in the ninja example is that the inaccuracy is lower (due to a smaller image height of 752px compared to your 17280px; note that the image's height gets multiplied by the percentage value so that a higher pixel value has a greater impact). The maximum difference between the actual value and the rendered value is only 0.0752px and on average we only have an inaccuracy of 0.0376px in the ninja example.

这真的很简单，不必依赖在这种情况下浮点数。我们将背景图像移动 576px 30步：

It's really as simple as not to rely on floating point numbers in this scenario. We move the background-image by 576px for 30 steps:

.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中跳跃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！