Блог

ТОЛЬКО ДЛЯ SAFARI

Я столкнулся со странной ошибкой на рабочем столе Safari. Я хотел отобразить модальный после достижения некоторой точки при прокрутке веб-сайта. К сожалению, когда мы делаем это в safari, модальный не доступен для просмотра (проблема с z-индексом?). Я использовал react react-modal, но я думаю, что эта проблема не связана ни с одним из них.

Исходный код демо:https://codesandbox.io/s/p5x9331y8x

Я заметил, что когда мы обернем запускающую функцию в setTimeout() , мы сможем увидеть, что модальный перестает работать только тогда, когда он появляется во время события прокрутки. https://codesandbox.io/s/3q7rmpj1mq

Ofc setTimeout() здесь не является решением… Я обнаружил проблемы, связанные с этим, но ни одна из них не соответствует моей проблеме в точности:

• https://github.com/reactjs/react-modal/issues/369
• https://css-tricks.com/forums/topic/safari-for-ios-z-index-ordering-bug-while-scrolling-a-page-with-a-fixed-element/

Также, когда в теле нет overflow: hidden , он работает должным образом, но здесь это тоже не решение (очевидно, мы хотим предотвратить прокрутку фона).

Примечание: Что касается демонстрации, модальный появляется после перехода к последнему разделу страницы (эта проблема повторяется). Полезно открывать страницу в полноэкранном режиме для тестирования.

Любая помощь была бы действительно оценена.

Проблема была решена путем изменения с overflow: hidden на overflow-y: hidden …