2013-06-19 2 views
0

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

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

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

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

  • Установка webkit-backface-visibility:hidden на все фоновые изображения и ДИВО skrollr тела.
  • анимировать элементы с использованием –webkit transition: translate3d

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

+0

Это происходит также, когда вы вызываете 'animateTo' вручную? Добавьте кнопку, чтобы проверить это. – Prinzhorn

+0

Я исправил проблему, отбросив версию Skrollr до версии 0.5.14 (2013-04-04), которая все еще использует iScroll? Я думаю, что это должно быть связано с верхним расположением анимации, а не с webkit-transition: translate? https://github.com/Prinzhorn/skrollr/issues/182 – harrynorthover

+0

Возможно. Было бы здорово, если бы вы могли открыть проблему на GitHub и помочь отладить ее. Попробуйте использовать 'top', заменив эту строку https://github.com/Prinzhorn/skrollr/blob/master/src/skrollr.js#L562 (вам нужно сделать' # skrollr-body' 'position: absolute 'также) – Prinzhorn

ответ

0

У меня была очень похожая проблема (т. Е. Мерцание фонового изображения Skrollr/iOS parallax). Я считаю, вы найдете, что это связано с этим: cubiq.org/you-shall-not-flicker

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

Смежные вопросы