web-dev-qa-db-fra.com

backgroundPositionX ne fonctionne pas sur Firefox

J'ai joué avec l'animation Sprite de youtube, mais il y a un problème. backgroundPositionX ne fonctionnera pas sous Firefox (mais fonctionnera sous Chrome et IE8) ... Voici le code: https://jsfiddle.net/74RZb/

Info supplémentaire: le problème est que sous firefox Cela ne change pas la position de l'arrière-plan (ne lit pas l'animation) ... il n'y a pas d'erreur, mais ne modifie pas la position de l'arrière-plan.

javascriptcssfirefoxanimationbackground-position
38
T1000

Firefox ne supporte pas backgroundPositionX, mais il supporte position de fond

Nous pouvons donc faire quelque chose comme ceci:

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

Ceci définit la position de l’arrière-plan, X en premier, puis Y.

Exemple de travail ici

60
Andy

Cela fonctionne dans IE, FF et chrome:

position de fond: 0 centre; 

3
technocrusaders.com

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

background-position: calc(NXpx) NYpx;
2
Leonardo Cardoso

Utilisant comme ceci:

background-position: calc(100% - 20px) center; // working on chrome and ff
background-position-x: calc(100% - 20px); // working on ie
1
Minh Khiêm Nguyễn

La position d'arrière-plan x peut fonctionner sous firefox, il vous suffit de spécifier une position d'arrière-plan fixe. Voici une fonction que j'ai écrite pour déplacer un ruban de gauche à droite. Au début, cela ne fonctionnait pas quand il y avait juste une spécification position-x, cela fonctionnait dans IE mais pas dans FF. C'était ma solution. C'est le code réel avec les commentaires de mon site qui fonctionne à la fois dans IE et dans 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);
            }
        }
    }
0
Shon

Vous pouvez faire quelque chose comme ça

Première installation de la migration jQuery

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

Incluez-les sur votre HTML

La propriété $ .browser vous permet de cibler les navigateurs auxquels vous souhaitez appliquer votre style

Dans ce cas, background-position peut être changé en propriété supportée backgroundPosition

Les drapeaux disponibles sont - Webkit - Safari - Opéra - Msie (pour IE) - Mozilla

Exemple pour IE ou Firefox

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

pour le chrome

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

Le mien a fonctionné et pour tous IE 

À votre santé

0
Indah Ibrahim