Почему skrollr предотвращает scolling на ipad?

Я пытаюсь создать простую анимацию параллакса с skrollr: мой сайт хорошо работает на Chrome/Mac, но я ' m видят необычное поведение на ipad..

На ipad (тестирование на симуляторе IOS),

основная часть страницы не отображается вообще (или может прокручиваться в фоновом режиме под анимированным div?)
анимированное фоновое положение (узор оригами) прокручивается в противоположном направлении (вниз вверх) в пределах, определенных в data-start/data-top-bottom

На рабочем столе эффект я могу имитировать эффект, если я взломал div#hero как position: fixed; в инструментах chrome dev.

примеры skrollr работают, как ожидалось, в симуляторе IOS.
У меня <div id="skrollr-body"></div> перед закрывающим тегом </body>

(отредактировано: неработающая ссылка удалена)

Любые предложения?

TIA, Tim

Ответ 1

Вы просто наивно добавили пустой элемент #skrollr-body. В документации указано

Начиная с skrollr 0.6.0 вам нужно только одно: включить элемент на своей странице с помощью id skrollr-body. Это элемент, который мы перемещаем, чтобы подделать прокрутку.

Если этот элемент мы перемещаем для поддельной прокрутки, тогда все ваши элементы должны быть внутри него (если они не установлены неподвижно).

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

https://github.com/Prinzhorn/skrollr#what-you-need-in-order-to-support-mobile-browsers

Ответ 2

Иными словами, просто добавьте тег <div id="skrollr-body"> сразу после открытия тега <body> и закройте это деление, добавив </div> прямо перед тегом </body>.

Ответ 3

добавление обертки div с идентификатором skrollr-body вообще ничего не делало, прокрутка просто не работает на мобильном устройстве