IOS 9 Safari: изменение элемента в фиксированное положение, пока прокрутка не будет показываться до тех пор, пока не будут прокрутки

Я занимаюсь разработкой сайта и пользуюсь неплохим плагином jQuery Sticky Kit. Он работает путем переключения свойства position на fixed и обратно, когда это необходимо. Работает очень плавно на рабочем столе и, вполне возможно, на мобильных устройствах.

Или, по крайней мере, раньше. iOS 9 поставляется с новым поведением: если элемент position элемента изменяется от static/relative/absolute до fixed, пока анимация прокрутки продолжается, элемент становится невидимым до тех пор, пока свиток не достигнет остановка. Как ни странно, противоположное изменение (от fixed до любого другого) выполняется без проблем.

Рабочий пример можно найти на странице главной страницы плагина. Черная панель навигации ( "Справочник примеров" ) должна быть липкой. Первоначально он static расположен на средней странице. Когда вы прокручиваете вниз, он становится fixed, и (в iOS 9) исчезает до тех пор, пока прокрутка не остановится. Поведение в настольных браузерах и iOS 8 является правильным.

Я как бы надеялся на типичные обходные пути CSS: форсирование 3D-преобразования, отключение видимости на обратной стороне и т.п., скрытые свойства собственности... Но ничего не работает.

Собираемся ли мы теперь забыть о "прилипающих" элементах теперь, когда он работал?

Ответ 1

У меня была такая же проблема, и мне удалось взломать ее, используя старый трюк "force the 3D transform". Просто установите элемент, в который вы собираетесь переключить позицию, чтобы иметь свойство преобразования translate3d(0px,0px,0px). Убедитесь, что это сделано до изменения свойства позиции.

Ответ 2

Единственное решение, которое я нашел для работы правильно, - отключить переводы z-index на прямых дочерних элементах фиксированного элемента, например:

.is-sticky > * {
    -webkit-transform: translateZ(0);
}

Ответ 3

Я исправил эту проблему с помощью дополнительного фиксированного элемента. После некоторого тестирования я узнал, что это первый элемент, который исправляется, имеет эту проблему. 2-й, 3-й и т.д. Отлично работает на устройствах iOS.

Итак, поставьте сразу после вашего тела opentag div.fixed-fix:

.fixed-fix {
    position:fixed;
    top:-1px; 
    height:1px; 
    width:100%; 
    background:white;
}

теперь это работает! Фиксированный fix div MUST имеет фоновый цвет, потому что в противном случае он не будет работать...

Ответ 4

jQuery Sticky Kit и другие подобные плагины, даже будучи хорошо закодированными, представляют такое поведение на iOS 9, и это не первый случай, когда что-то подобное происходит. Главное, что Firefox Safari и Safari Mobile поддерживают экспериментальный position: sticky;, так же Google (Chromium), но из-за проблем с интеграцией пришлось временно отключить его, вы можете больше узнать о нем здесь. Сказав это, я предполагаю, что очень скоро position: sticky; станет частью спецификации CSS и будет поддерживаться всеми основными браузерами, поэтому я считаю, что лучшим решением этой проблемы является использование polyfill вместо плагина, Конечно, polyfill не будет охватывать все функции и функциональные возможности, предлагаемые этими плагинами. Тем не менее, во многих ситуациях использование polyfill будет выполнять эту работу, как надежное и эффективное решение, поддерживаемое всеми основными браузерами. На мой взгляд, сейчас это путь. Я лично использую stickyfill, хотя я уверен, что другие полиполки в дикой природе сделают трюк. Все, что я могу сказать, это то, что, поскольку я начал использовать polyfill вместо плагинов, у меня не было проблем с совместимостью с браузером.

Ответ 5

Добавьте это в свой фиксированный элемент
Использование смешивания: @include transform(translate3d(0px,0px,0px))
Использование CSS: translate3d(0px,0px,0px)