Ratchet Модальная ошибка на iOS 8

Question

У меня есть приложение в магазине, которое построено с использованием рамки Ratchet. Он работал нормально, пока не вышел iOS 8. Теперь, когда я тестирую его на iOS 8, заголовки для модалов не появятся. Все элементы управления, такие как Close, Back кнопки на панели работают, когда я нажимаю, но панель и элементы управления на ней не видны. Это происходит только на iOS 8, отлично работает на iOS 7 и более ранних версиях.

Чтобы воспроизвести эту ошибку, пожалуйста, откройте этот пример приложения http://goratchet.com/examples/app-android-notes в Safari на IOS 8 устройства или тренажере, а затем нажмите на кнопку Новая банкнота открыть модальное.

Я заметил, что при отладке в веб-инспекторе Safari, если я перемещаю элементв модуле в другое место, а затем возвращаю его в исходное положение, он появляется. Или иногда, меняя свой display объект от block до none, а затем обратно на block работает. Или иногда, если я прокручиваю страницу.

Любое решение будет высоко оценен

Answer 1

Кажется есть проблема с position: fixed в Safari, как описано в этом СЦ вопрос: Mobile safari position:fixed z-index glitch when scrolling

Вы можете это исправить, добавив это правило к вашему CSS

header.bar.bar-nav { 
    -webkit-transform: translateZ(0); 
} 

Вы можете отслеживать проблему в репозитарии Хитчета Github e - https://github.com/twbs/ratchet/issues/679

Answer 2

Вы должны попробовать position:sticky;. Это сделано для работы с position на Safari. fixed был проблемой с мобильными устройствами в течение многих лет. Я думал, что это было зафиксировано, но iOs8 имеет странное поведение тоже ...

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit