backgroundPositionX not working on Firefox

Question

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.

score 60 · Accepted Answer · answered Dec 19 '12 at 09:02

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

answered Dec 19 '12 at 09:02

Andy

14,427
3
52
76

Thanks, I will click the "accepted answer" button once stackoverflow alows me :) – T1000 Dec 19 '12 at 09:04
Its right, but look at my answer its working fine from your answer. Your code is working slowly. – Sandeep Pattanaik Dec 19 '12 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. – Sandeep Pattanaik Dec 19 '12 at 11:28

score 3 · Answer 2 · answered Jul 02 '15 at 00:53

3

This works in IE, FF and chrome:

background-position: 0 center;

answered Jul 02 '15 at 00:53

technocrusaders.com

195
1
6

score 2 · Answer 3 · edited Dec 08 '14 at 00:37

2

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

background-position: calc(NXpx) NYpx;

edited Dec 08 '14 at 00:37

Zach Saucier

24,871
12
85
147

answered Apr 11 '13 at 21:41

Leonardo Cardoso

1,164
2
12
22

score 1 · Answer 4 · edited Dec 21 '15 at 04:28

1

Using like this:

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

edited Dec 21 '15 at 04:28

Tristan

3,301
8
22
27

answered Dec 21 '15 at 04:24

Minh Khiêm Nguyễn

69
2
6

When answering questions please provide explanation so that it can be more easily understood by other users of the site. – Tristan Dec 21 '15 at 04:29

score 0 · Answer 5 · answered Jul 19 '13 at 21:18

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

doesn't work even if you set background-position-y in the CSS — Max, Jun 06 '14 at 11:29

score 0 · Answer 6 · answered Dec 11 '14 at 05:30

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

backgroundPositionX not working on Firefox

6 Answers6

Linked