BackgroundPositionX не работает в Firefox

Я играю с анимацией sprite youtube, но есть проблема. Он не будет работать в Firefox (но работает в Chrome и IE8)... Это код: http://goo.gl/4IxkI

Дополнительная информация: проблема заключается в том, что под firefox он не меняет положение фона (не будет воспроизводить анимацию)... ошибок нет, просто не меняет положение фона.

Приветствуем помощь - спасибо

Ответ 1

Firefox не поддерживает backgroundPositionX, но поддерживает фоновое положение

Итак, мы можем сделать что-то вроде этого:

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

Это устанавливает положение фона, сначала X, затем Y.

Рабочий пример здесь

Ответ 2

Это работает в IE, FF и chrome:

background-position: 0 center;

Ответ 3

Это сработало для меня. NX - количество пикселей в оси X и NY по оси Y.

background-position: calc(NXpx) NYpx;

Ответ 4

Используя следующее:

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

Ответ 5

Фоновая позиция-x может работать в firefox, вам просто нужно указать фиксированную позицию background-y. Вот функция, которую я написал для перемещения ленты слева направо. Сначала это не сработало, когда была только спецификация position-x, хорошо она работала в IE, но не FF. Это было мое решение. Это фактический код с комментариями моего сайта, который работает как в IE, так и в 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);
            }
        }
    }

Ответ 6

Вы можете сделать что-то вроде этого

Сначала установите перенос jquery

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

Включите их в свой html

Свойство $.browser позволяет настроить таргетинг браузеров, в которые вы хотите применить свой стиль, в

В этом случае для фонового положения можно изменить на поддерживаемое свойство backgroundPosition

Доступные флаги - webkit - сафари - опера - msie (для IE) - mozilla

Пример для IE или Firefox

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

для хрома

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

Я получил свою работу и для всех IE

Приветствия