38

I have play with youtube's sprite animation but there is a problem. backgroundPositionX won't work under Firefox (but works on Chrome and IE8)... This is the code: https://jsfiddle.net/74RZb/

Extra info: the problem is that under firefox It doesn't change the background position (won't play the animation)... there are no errors, just doesn't change the background position.

0

6 Answers 6

60

Firefox doesn't support backgroundPositionX, but it does support background position

So we can do something like this:

psy.style.backgroundPosition = x+'px 0';

This sets the background position, X first, then Y.

Working example here

3
  • Thanks, I will click the "accepted answer" button once stackoverflow alows me :)
    – T1000
    Dec 19, 2012 at 9:04
  • Its right, but look at my answer its working fine from your answer. Your code is working slowly. Dec 19, 2012 at 10:37
  • @Andy Yeah you are right. I also vote up your answer. Chill.. I tried your formula, but Its working slowly. So I changed it 60 to 30. Have a good day. Dec 19, 2012 at 11:28
3

This works in IE, FF and chrome:

background-position: 0 center;

2

This worked for me. NX is number of pixels in axis X and NY in axis Y.

background-position: calc(NXpx) NYpx;
1

Using like this:

background-position: calc(100% - 20px) center; // working on chrome and ff
background-position-x: calc(100% - 20px); // working on ie
1
  • When answering questions please provide explanation so that it can be more easily understood by other users of the site.
    – Tristan
    Dec 21, 2015 at 4:29
0

Background position-x can work in firefox you just have to specify a fixed background-y position. Here is a function I wrote to move a ribbon from left to right. At first it did not work when there was just a position-x specification, well it worked in IE but not FF. This was my solution. It is the actual code with comments from my site that works in both IE and FF:

   //starts ribbon motion at bottom of animation div 
    function startMotion() {
        var ribbonMove = setInterval(function () { ribbonMotion() }, 50);
        var x = 0;
        var cycles = 0;

        function ribbonMotion() {
            //background position moves on the x plane and is fixed at 0 on the y plane (single plane specification does not work in FF)
            document.getElementById("ribbon").style.backgroundPosition = x + "px" + " " + 0 + "px";
            x++;
            if (x == 800 || x==1600 || x==2400 ||x==3200) {
                cycles++;

              //sets number of cycles before motion stops (max 4 cycles)  
            }
            if (cycles == 3) {
                clearInterval(ribbonMove);
            }
        }
    }  
1
  • doesn't work even if you set background-position-y in the CSS
    – Max
    Jun 6, 2014 at 11:29
0

You can do something like this

First install jquery migration

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

Include these on your html

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");                
}

I got mine working and for all IE

Cheers

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

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

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