Native Browser Zoom打破CSS3 spritesheet动画

Question

我目前正在使用CSS动画和spritesheet，非常类似于以下方法： https://jsfiddle.net/simurai/CGmCe/

CSS：

{
    animation: play .8s steps(10) infinite;
}

@keyframes play {
    from { background-position:    0px; }
    to { background-position: -500px; }
}

我在某些浏览器中发现了一个问题，例如Safari，用户可以使用＆＃39; Cmd - +＆＃39;进行原生缩放。其中原生缩放似乎抛出动画并显示它滚动。并非所有浏览器都显示此问题。 Chrome＆amp; Mac上的Firefox看起来很好。我还没有能够在Windows机器上查看。

我最初的猜测是＆＃39; 100％{background-position}＆＃39;样式需要与浏览器当前缩放的数量一起缩放。但是，如果是这种情况，那么我需要一些媒体查询来检测浏览器何时缩放，据我所知不存在。

有没有人有其他潜在的跨浏览器解决方案？也许通过CSS动画多个帧到动画的其他方法？我想避免使用GIF。

谢谢！

-Mikey