Проблемы с сайтом параллакса с использованием skrollr, skrollr-меню в iOS7

Я использую skrollr.js и skrollr-menu для создания веб-сайта с параллаксом. У меня есть 3 div с вложенными элементами, которые я хотел бы параллаксировать с разной скоростью. На рабочем столе все работает, как и ожидалось, но на iPad под управлением iOS 7 у меня возникают проблемы с расположением элементов и скоростью их прокрутки. Три разных элемента div имеют класс position: fixed, а вложенные элементы — class position: absolute; и позиционируются по оси Y с использованием top:px (вместо этого пытались использовать % со смешанными результатами). другие (не вложенные, т.е. #content) div, похоже, работают одинаково во всех браузерах и устройствах. Я был бы очень признателен за любую помощь с этой проблемой, она сводила меня с ума в течение нескольких дней, это мой первый проект, использующий skrollr, поэтому у меня нет большого опыта, но пока мне это нравится, за исключением этого сбоя на iOS, я проверил документация и связанный с этим вопрос в stackOverflow, но все равно не повезло! Надеюсь, кто-то сможет указать мне правильное направление, вот небольшая скрипка о том, как я пытаюсь добиться этого, хотя, чтобы увидеть это в iOS, мне нужно будет предоставить прямую ссылку на проект в ближайшее время, пожалуйста, потерпите меня, так как я чтобы перенести существующий проект для использования его со skrollr на мобильных устройствах, поэтому я хотел бы максимально очистить код перед отправкой, чтобы избежать путаницы, а пока вот скрипка:

//Init Skrollr

$(document).ready(function(){ var s = skrollr.init({forceHeight: false, smoothScrolling: true, smoothScrollingDuration: 150});

    skrollr.menu.init(s, {
        easing: 'outCubic',
        animate: true,
        duration: 1000

}); });

http://jsfiddle.net/shinobisan/EvPdL/6/

Спасибо!!


person user3330769    schedule 20.03.2014    source источник


Ответы (1)


На мобильных устройствах элемент skrollr-body перемещается с помощью CSS-преобразований, которые разрушают элементы с фиксированным положением. Пожалуйста, прочтите эту часть документации, которую я только что дополнил вторым абзацем.

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

Или, другими словами: на мобильных устройствах элемент skrollr-body перемещается с помощью преобразований CSS. У вас не может быть position:fixed или background-attachment:fixed внутри элементов, которые используют преобразования CSS в соответствии со спецификацией CSS (http://meyerweb.com/eric/thoughts/2011/09/12/un-исправление-фиксированных-элементов-с-css-преобразованиями/). Вот почему эти элементы должны быть за пределами элемента skrollr-body.

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

person Prinzhorn    schedule 21.03.2014
comment
Большое спасибо за ваш ответ! я думаю, что начинаю понимать, как работает скролл-тело, только эта проблема с iOS меня полностью смутила! Я изменил скрипку, как вы предложили, поместив элемент параллакса за пределы тела прокрутки, но не повезло, на этот раз он работает на моем экране, но на iPad он отправляется далеко внизу, едва видимый в портретном режиме и не отображается в пейзаж. Я добавил целевой div, содержащийся в div содержимого, чтобы визуализировать проблему, где #non-nested-img должен совпадать с позицией цели как на экране, так и на устройстве (раздел 2). - person user3330769; 21.03.2014
comment
Было бы лучше предоставить вам живой пример, только мой сервер в данный момент не работает, надеюсь, скрипка поможет нам понять суть на данный момент. Еще раз спасибо, что нашли время изучить мою проблему! jsfiddle.net/shinobisan/EvPdL/8 - person user3330769; 21.03.2014
comment
Извините, в вашей скрипке я не вижу никакой анимации, только прокрутка. - person Prinzhorn; 22.03.2014
comment
Обновление: после долгих испытаний я наконец вернулся к исходному проекту и применил те же принципы. Теперь сайт прокручивается на iPad только с небольшими глюками! я поместил статические элементы внутри skrollr-body и оставил все фиксированные элементы с абсолютным позиционированием, как вы предложили, skrollr должен делать это различие, чтобы правильно прокручивать элемент, проблема заключалась в том, что содержимое было перемещено в нижнюю часть страницы и меню пытался получить доступ к содержимому, но не смог. - person user3330769; 22.03.2014
comment
Глюк, который я получаю сейчас, заключается в том, что при переходе из портретного режима в ландшафтный на iPad меню skrollr становится немного сумасшедшим, но когда я перезагружаю страницу в ландшафтном режиме, все в порядке, похоже, этого не происходит из альбомного режима в портретный( я могу проверить только в iOS7 атм.). Чтобы исключить css, я в настоящее время очищаю свой код, также стоит отметить, что я использую s.refresh() в живом примере при вызове skrollr.init(), хотя комментирование этой строки ничего не меняет. - person user3330769; 22.03.2014
comment
Fiddle не работал, потому что мой сервер все еще не работает, а skroll-menu.js не загружался, поэтому я добавил внешнюю ссылку в ваш репозиторий и обновил ее здесь: ссылка только для демонстрационных целей, но для отладки мне было интересно, можно ли отправить вам ссылку на рабочий сервер, чтобы вы могли увидеть живой пример, я просто не Я не чувствую себя комфортно, раскрывая эту информацию публично, поскольку моему клиенту это может не понравиться, если, конечно, вы согласны! скоро сообщим, если что-нибудь еще появится! - person user3330769; 22.03.2014
comment
Вы можете отправить его по адресу [email protected], хотя у меня нет iPad. - person Prinzhorn; 22.03.2014
comment
Я отправил вам электронное письмо, надеюсь, вы сможете взглянуть! Вскоре последует несколько скриншотов iPad, чтобы вы могли увидеть проблему, с которой я столкнулся, спасибо! - person user3330769; 23.03.2014
comment
Большое спасибо @Prinzhorn за его любезную поддержку и отзывы, к сожалению, я не смог полностью отладить проблему, так как у меня больше нет устройства для тестирования, но я обновлю ответ всеми указателями и советами, предоставленными Prinzhorn, а также надлежащим примером проблему, чтобы другие пользователи могли извлечь выгоду из этого ответа. - person user3330769; 27.08.2014