Элементы исчезают при прокрутке в Safari - -webkit-transform fix работает только в первый раз

Question

Это происходит только в iPhone Safari. Я знаю, что «обычное решение» для этой проблемы - применить -webkit-transform: translate3d (0,0,0); (за ответ Сержа здесь ), и это решает проблему, но только один раз.

Проблема возникает с меню «ящик», которое открывается, когда пользователь нажимает кнопку меню. Меню будет отображаться нормально, но когда оно касается / прокручивается пальцем, все меню исчезает со страницы. Применение -webkit-transform: translate3d(0,0,0) устраняет проблему, но только в первый раз. Если меню закрывается и открывается снова, проблема появляется снова. Я подтвердил, что свойство -webkit-transform: translate3d(0,0,0) все еще присутствует в меню (однако оно отображается серым цветом в инструментах разработчика Safari - выделено серым цветом, а не перечеркнуто линией, проходящей через него).

Я добавил немного JavaScript на страницу, чтобы при открытии меню к нему применялось свойство -webkit-transform: translate3d ..., и хотя это навсегда решает проблему, я его не рассматриваю достаточно чистым, чтобы по-настоящему исправить.

Я также пытался применить -webkit-overflow-scrolling: touch в различных комбинациях с -webkit-transform: translate3d(0,0,0) к родительскому элементу, дочерним элементам и т. Д. И не смог решить проблему за пределами "первой попытки".

Answer 1

Один вариант для всех, кто смотрит на это:

Если у вас есть код в jQuery $( window ).resize(function(){});, он может быть запущен при прокрутке. В моем случае я скрывал меню при изменении размера окна, которое отлично работало на рабочем столе, но также вызывалось при прокрутке в iOS Safari.

Благодарю этот ответ за то, что он указал мне на этот неприятный, хорошо скрытый вопрос.

Answer 2

Так как эта известная проблема Safari возникает только для элементов с позицией: относительный, я решил проблему, установив position: fixed для элемента контейнера прокрутки. Не нужно добавлять -webkit-overflow-scrolling: touch или -webkit-transform: translate3d(0,0,0).

Как уже упоминалось в части вопроса, -webkit-transform: translate3d(0,0,0) исправил проблему, но только в первый раз меню было открыто. После закрытия и повторного открытия без обновления страницы проблема возникнет так, как если бы исправление вообще не применялось.

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