Как можно управлять анимацией GIF в Google Chrome?

Question

[Станислав Черенков]

Вот тут: www.the-village.ru/village/situation/situation/171... (или на любой другой статье на The Village) время от времени появляется баннер "Концепт недели – квартира-гаджет".

Содержимое элемента – ссылка и gif-изображение, никаких подвохов. При этом баннер ведёт себя в Google Chrome следующим образом: показывает разные кадры гифа статично в зависимости от положения прокрутки; при приближении к верхней или нижней границе страницы включает анимацию с последнего статичного кадра.
В Firefox, Safari – не работает, там gif просто анимируется.
Как можно реализовать такое поведение? Интернет предлагает решения с canvas, но здесь же его нет.

Comments

[Дмитрий Спирин]

По-моему, это какой-то баг Хрома.
Анимация не контролируется, а ставится на паузу, возобновляясь с того же фрейма. Причем это проbсходит только когда родительский слой прилеплен, т.е. position:fixed. Стоит поменять его на relative, как анимация запускается. И наоборот.

[Дмитрий Спирин]

Дмитрий Спирин: Когда-то у Мозиллы была похожая проблема: https://bugzilla.mozilla.org/show_bug.cgi?id=715368

[Станислав Черенков]

Дмитрий Спирин: Точно, так и есть, напишу багрепорт. Я уж думал, у разработчиков LAM есть какое-то демоническое знание. Спасибо большое!

Answer 1

[SagePtr]

Видимо, это баг, связанный с position: fixed. Если поменять position на любой другой, то анимация снова работает. Фиксированные элементы отрисовуются отдельно, и видимо, хром забывает отрисовывать каждый кадр, либо пытается экономить ресурсы.
При приближении к верхней и нижней границе скрипт меняет стиль этого элемента, потому анимация при этом отрисовуется нормально.

Answer 2

[Сергей Мельников]

А подвоха нет, просто отслеживают скролл и меняют периодически картинку

Comments

[Станислав Черенков]

Посмотрите внимательнее, картинка всё время одна и та же – анимированный гиф. Если было бы так просто, тот же функционал был в Файерфоксе.