javascript - right - backgroundPositionX no funciona en Firefox

css background position from right

Question

Juego con la animación de sprites de youtube, pero hay un problema. No funcionará en Firefox (pero funciona en Chrome e IE8) ... Este es el código: http://goo.gl/4IxkI

Información adicional: el problema es que en Firefox no cambia la posición de fondo (no reproduce la animación) ... no hay errores, simplemente no cambia la posición de fondo.

Apreciaremos la ayuda, gracias

Answer 1

Esto funcionó para mí. NX es el número de píxeles en el eje X y NY en el eje Y.

background-position: calc(NXpx) NYpx;

Answer 2

Esto funciona en IE, FF y Chrome:

background-position: 0 center;

Answer 3

Firefox no es compatible con backgroundPositionX, pero sí admite la posición de fondo

Entonces podemos hacer algo como esto:

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

Esto establece la posición de fondo, X primero, luego Y.

Ejemplo de trabajo here

Answer 4

La posición de fondo-x puede funcionar en Firefox, solo tiene que especificar una posición fija de fondo-y. Aquí hay una función que escribí para mover una cinta de izquierda a derecha. Al principio no funcionó cuando solo había una especificación de posición-x, funcionaba bien en IE pero no en FF. Esta fue mi solución. Es el código real con comentarios de mi sitio que funciona tanto en IE como en 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);
            }
        }
    }  

Answer 5

Puedes hacer algo como esto

Primero instale la migración de jquery

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

Incluye estos en tu html

La propiedad $ .browser le permite orientar navegadores a los que desea aplicar su estilo

En este caso, la posición de fondo se puede cambiar a la posición de fondo admitida por la propiedad.

Las banderas disponibles son - webkit - safari - opera - msie (para IE) - mozilla

Ejemplo para IE o Firefox

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

para cromo

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

Tengo el mío trabajando y para todos IE

Aclamaciones

Answer 6

Usando así:

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