backgroundPositionX ne fonctionne pas sur Firefox

Firefox ne prend pas en charge backgroundPositionX, mais il prend en charge de fond

Afin que nous puissions faire quelque chose comme ceci:

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

Ce définit l'arrière-plan position X d'abord, puis Y.

Exemple de travail ici

Cela a fonctionné pour moi. NX est le nombre de pixels dans l'axe X et NY dans l'axe Y.

background-position: calc(NXpx) NYpx;

De fond-x peuvent travailler dans firefox, il suffit de spécifier un arrière-plan fixe-y la position. Voici une fonction que j'ai écrit pour déplacer un ruban de gauche à droite. Au début, il ne fonctionne pas quand il y a juste un position-x spécification, eh bien, il a travaillé dans IE mais pas FF. C'était ma solution. C'est le code avec des commentaires de mon site qui fonctionne dans IE et 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);
            }
        }
    }