According to jQuery, this is because, as stated on the animate documentation animate :
All animated properties must have the same numerical value (except as noted below); properties that are not numeric cannot be animated using the basic jQuery functionality ....
So, in fact, in Firefox you are using undefined behavior. The right thing to do is animate on backgroundPositionX, however Firefox does not support this.
There is, however, a jQuery plugin that does what you want:
http://plugins.jquery.com/project/backgroundPosition-Effect
Update
Upon closer inspection, the plugin does not support += or -= formats.
I hacked it in this example:
http://jsfiddle.net/CxqSs/ (see the new example below.)
It can definitely use some cleanup and should probably be added to this plugin, but it works in both browsers and does not rely on undefined behavior.
By the way, I don’t know whether it’s worth noting, but if you leave this animation long, it will eventually overflow the value and break. This can be overcome by animating the entire length of the background image, and then resetting the offset to 0px in the callback until the next animation. This would also avoid the += format.
AND
It should be noted that speed: 1, step: 1 and speed: 50, step: 50 equivalent.
The reason they look at different speeds is because
- Overhead exceeds 1 (which is actually a millisecond), because animate is more often called.
The default easing is “rocking,” which means the animation speeds up and slows down a bit throughout the course, which means that the overall speed is slightly changed. You must change the attenuation to “linear” for your scroll case:
var animate = function() { element.animate({ ... }, speed, "linear", animate); };
This means that you can use the backgroundPosition-Effect plugin without "+ =", setting your step to 2247 (image width), as I said above.
And what finally brings us ... wait for him ...
http://jsfiddle.net/zyQj3/20/
Cross-platform, non-kludgy, not crowded, properly weakening, requiring no additional parameters, solution.