Проблемы со Skrollr iOS

У меня проблемы с сайтом параллакса, который я создаю с помощью Skrollr.

Я создал сайт, который имеет тот же эффект, что и https://www.spotify.com/uk/. Эффект заключается в больших фоновых изображениях полной ширины, которые перемещаются медленнее, чем естественная прокрутка браузера, а текст и другие изображения перемещаются поверх них.

При просмотре в настольном браузере сайт работает нормально и работает отлично. Проблема, с которой я сталкиваюсь, заключается в том, что при тестировании на iPad (iOS 6.1.3) вы отпускаете палец с экрана, и вступает в действие промежуточная анимация Skrollr, большие фоновые изображения и другой контент на экране начинают дрожать и прыгать. экран. Этого не происходит, когда ваш палец все еще касается экрана и прокручивается, только когда вы отпускаете его, и вступает в действие замедление.

Несколько вещей, которые я пробовал:

  • Установка webkit-backface-visibility:hidden для всех фоновых изображений и div skrollr-body.
  • Анимируйте элементы с помощью –webkit transition: translate3d

Если бы кто-нибудь мог пролить свет на то, почему у меня возникает эта проблема с мерцанием страницы, это было бы здорово.


javascript html performance parallax webkit
person harrynorthover    schedule 19.06.2013    source источник
comment
Это также происходит, когда вы вызываете animateTo вручную? Добавьте кнопку, чтобы проверить это.   -  person Prinzhorn    schedule 19.06.2013
comment
Я исправил проблему, откатив версию Skrollr до 0.5.14 (2013-04-04), которая все еще использует iScroll? Я думаю, это должно быть связано с верхней позицией анимации, а не с webkit-transition: translate? github.com/Prinzhorn/skrollr/issues/182   -  person harrynorthover    schedule 19.06.2013
comment
Возможно. Было бы здорово, если бы вы открыли вопрос на GitHub и помогли его отладить. Попробуйте также использовать top, заменив эту строку github.com/ Prinzhorn/skrollr/blob/master/src/skrollr.js#L562 (нужно также сделать #skrollr-body position:absolute)   -  person Prinzhorn    schedule 19.06.2013
comment
Готово :) github.com/Prinzhorn/skrollr/issues/249   -  person harrynorthover    schedule 19.06.2013

Ответы (1)


arrow_upward
0
arrow_downward

У меня была очень похожая проблема (например, фоновое изображение параллакса Skrollr / iOS «мерцание»). Думаю, вы обнаружите, что это связано с этим: cubiq.org/you-shall-not-flicker < /а>

Простое решение (из статьи): -webkit-transform:translate3d(0,0,0).

person Paskainos    schedule 08.08.2014