Native Browser Zoom breaking CSS3 spritesheet animation

Question

I am currently using CSS animation along with a spritesheet, much like the following method: https://jsfiddle.net/simurai/CGmCe/

CSS:

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

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

I'm finding an issue in some browsers like Safari where users can zoom natively using 'Cmd-+' in which the native zoom seems to throw off the animation and show it scrolling. Not all browsers seem to display the issue. Chrome & Firefox on a Mac look fine. I haven't been able to check on a Windows machine yet.

My initial guess is that the '100% { background-position }' style needs to scale along with the amount the browser is currently zoomed. However, if this is the case then I would need some media query which detects when the browser is zoomed which doesn't exist to my knowledge.

Does anybody have any other potential cross-browser solutions? Maybe other ways of animating multiple frames into an animation through CSS? I'd like to avoid using a GIF.

Thanks!

-Mikey