BackgroundPositionX Not Working On Firefox

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

Solution 1:

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

Solution 2:

This works in IE, FF and chrome:

background-position: 0 center;

Solution 3:

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

background-position: calc(NXpx) NYpx;

Solution 4:

Using like this:

background-position: calc(100% - 20px) center; // working on chrome and ff
background-position-x: calc(100% - 20px); // working on ie

Solution 5:

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