web-dev-qa-db-de.com

backgroundPositionX funktioniert nicht unter Firefox

Ich habe mit der Sprite-Animation von YouTube gespielt, aber es gibt ein Problem. backgroundPositionX funktioniert nicht unter Firefox (funktioniert jedoch unter Chrome und IE8) ....__ Dies ist der Code: https://jsfiddle.net/74RZb/

Zusatzinfo: Das Problem ist, dass unter Firefox die Hintergrundposition nicht geändert wird (die Animation wird nicht wiedergegeben). Es gibt keine Fehler, nur die Hintergrundposition wird nicht geändert.

javascriptcssfirefoxanimationbackground-position
38
T1000

Firefox unterstützt backgroundPositionX nicht, unterstützt jedoch Hintergrundposition

So können wir so etwas machen:

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

Dies legt die Hintergrundposition, X zuerst und dann Y fest.

Arbeitsbeispiel hier

60
Andy

Dies funktioniert in IE, FF und Chrome:

hintergrundposition: 0 Mitte; 

3
technocrusaders.com

Das hat bei mir funktioniert. NX ist die Anzahl der Pixel in Achse X und NY in Achse Y.

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

Verwendung wie folgt:

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

Hintergrundposition-x kann in Firefox funktionieren. Sie müssen lediglich eine feste Hintergrund-y-Position angeben. Hier ist eine Funktion, die ich geschrieben habe, um ein Farbband von links nach rechts zu verschieben. Anfangs funktionierte es nicht, wenn es nur eine Position-x-Spezifikation gab, gut funktionierte es in IE, aber nicht in FF. Das war meine Lösung. Es ist der eigentliche Code mit Kommentaren von meiner Site, der sowohl in IE als auch in FF funktioniert:

   //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

Sie können so etwas tun

Installieren Sie zunächst die Jquery-Migration

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

Fügen Sie diese in Ihrer HTML-Datei ein

Mit der $ .browser-Eigenschaft können Sie Browser ansprechen, auf die Sie Ihren Stil anwenden möchten

In diesem Fall kann die Hintergrundposition in eine von der Eigenschaft unterstützte backgroundPosition geändert werden

Verfügbare Flags sind - webkit - safari - opera - msie (für IE) - mozilla

Beispiel für IE oder Firefox

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

für Chrom

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

Ich habe meine Arbeit und für alle IE 

Prost

0
Indah Ibrahim