1

I am working on a wesbsite here: http://www.benjaminpotter.org/portfolio2/

Look at the loading splash, it looks all good but not in Firefox. Do you know why background positions being animated in jquery don't work in Firefox? Have a look at the script attached to it called animate here.

3 Answers 3

4

As noted by dzejkej, separate values for background-position are not part of the standard and not supported by Firefox. As noted on the jQuery animate() page:

All animated properties should be animated to a single numeric value

And that means that background-position doesn't qualify, as it requires two values, x pos and y pos.

You will have to use an animation plugin. Unfortunately, at the moment the jQuery plugins site is down, so I have provided a version that works in Firefox here:

/** jquery.bgpos.js
 * @author Alexander Farkas
 * v. 1.02
 */
(function($) {
    $.extend($.fx.step,{
        backgroundPosition: function(fx) {
            if (fx.state === 0 && typeof fx.end == 'string') {
                var start = $.curCSS(fx.elem,'backgroundPosition');
                start = toArray(start);
                fx.start = [start[0],start[2]];
                var end = toArray(fx.end);
                fx.end = [end[0],end[2]];
                fx.unit = [end[1],end[3]];
            }
            var nowPosX = [];
            nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
            nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
            fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

           function toArray(strg){
               strg = strg.replace(/left|top/g,'0px');
               strg = strg.replace(/right|bottom/g,'100%');
               strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
               var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
               return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
           }
        }
    });
})(jQuery);

Please see this page for reference on it's use.

0
0

background-position-x is non standard CSS property and it is not supported by Firefox.

See:

0

I got mine working with better and simple solution

First install jquery migration

https://github.com/jquery/jquery-migrate/#readme

The $.browser property allows you to target browsers you want to apply your style into

In this case for background-position can be changed to property supported backgroundPosition

Available flags are - webkit
- safari - opera - msie (for IE) - mozilla

Example for IE or Firefox

if ( $.browser.msie || $.browser.mozilla) {
            $(".element").css('backgroundPosition', position + "px 0");                
}

for chrome

if ( $.browser.webkit) {
            $(".element").css('backgroundPosition', position + "px 0");                
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.