мерцание фонового изображения skrollr в Firefox

У меня есть div с фоновым изображением. Используя skrollr, я меняю фоновое изображение, получая что-то вроде анимации (сворачивание бумажного аэродрома). чтобы предотвратить интерполяцию, я использую настраиваемую функцию плавности:

easeInt: function(p) {
   return Math.floor(p * 13) / 13;
}

Моя анимация выглядит так (таблица стилей skrollr):

3528 {
    background-image[easeInt]: url("img/plane14/plane0.png");
}

3928 {
    background-image[easeInt]: url("img/plane14/plane13.png");
}

Во время анимации фоновое изображение на некоторое время исчезает, прежде чем появится следующее, в результате чего анимация начнет мерцать. Эта проблема проявляется только в Firefox, но не в Chrome или Safari. Я предварительно загружаю все изображения, используя

var img1 = new Image(); img1.src = 'img/plane14/plane1.png';

Предварительная загрузка всех изображений с помощью HTML тоже не сработала:

<div style="width:100px; height:100px; position: fixed; top: -100px; left: -100px;">
<!-- loading all images as <img src="imageurl.png"> -->
</div>

Я также пробовал использовать опцию skrollr для предотвращения интерполяции. Уже проверил мою функцию плавности, она должна работать нормально. В firebug я могу заметить, что фоновое изображение изменяется по желанию. Я все еще мерцаю.


javascript animation html css skrollr
person Frank Schaufelberger    schedule 16.02.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я не знаком со Skrollr, но я сталкивался с подобной ситуацией, когда изображения мерцали, когда их меняли местами.

Насколько я понимаю, проблема заключается в том, что Firefox не декодирует изображения до тех пор, пока они не будут просмотрены в первый раз, а мерцание, которое вы видите, - это изображение, которое пытается отобразить до того, как декодирование будет готово. Загрузка изображения выполняется отдельно от декодирования, поэтому предварительная загрузка не влияет на эту проблему для Firefox.

Если вы перейдете к about: config в Firefox, вы сможете изменить параметр image.decode-moment.enabled, и это должно решить проблему локально. К сожалению, лучшего способа решить эту проблему я не нашел.

Я обнаружил несколько случаев bugzilla, которые, как мне кажется, связаны с этой проблемой:

https://bugzilla.mozilla.org/show_bug.cgi?id=1149893

https://bugzilla.mozilla.org/show_bug.cgi?id=1158440

person Kevin Langille    schedule 12.11.2015
comment
Еще одна ссылка на bugzilla: bugzilla.mozilla.org/show_bug.cgi?id=705826. Здесь предлагается обходной путь: либо предварительная загрузка изображений за другими элементами, либо их отрисовка в объекте холста. - person Kevin Langille; 13.11.2015