Question

I’m trying do implement a Ken Burns (pan and zoom on a picture) with JQuery but that doesn’t work with Firefox (12.0) and Opera :

 var endCss = {
     'background-position-x': '-20px',
     'background-position-y': '-200px',
     'background-size': '1100px'
 };
 var frame = $('#myid');
 frame.animate(endCss, 1000);

The background-size does change but not it’s position.

Does anybody can tell if I’m doing something wrong or if I’m in front off a bug ?

PS : this works fine in Chrome and Safari

Answer 1

Firefox and Opera don’t have support for background-position-x or background-position-y – these are not spec.

Not sure if this will help as you may want to change both x and y on each step, but here is a rather informative answer: Animate background position y in Firefox with Jquery