Проблема, которую я испытываю при просмотре моего сайта с помощью любого устройства iOS 7 с Safari. Каждый раз, когда я меняю страницу на своем веб-сайте, окно браузера становится белым, а затем через мгновение страница начинает рендеринг правильно.Safari iO7: мерцание при переходе страницы при использовании аппаратного ускорения css
Другие сайты этого не делают, поэтому после разрыва моих волос в течение многих часов я сузил его до некоторого CSS, применяемого к моему контейнеру на странице. Это вынуждает аппаратное ускорение посредством:
- -webkit-transform: translate3d (0,0,0);
- -webkit-overflow-scrolling: touch;
Если я удаляю этот css, при смене страниц на моем сайте нет белых мерцаний между загрузками страниц. К сожалению, мне нужен этот css, чтобы получить аппаратное ускорение и гладкую прокрутку.
Из того, что я читал, я предполагаю, что это может быть связано с тем, что контейнер html продвигается на уровень (потому что его аппаратное ускорение), и это как-то заставляет браузер отображаться странно.
Я нашел несколько статей по этому вопросу, но не ответил, что работал для меня. Кто-нибудь сталкивался с этим и, возможно, имел решение?
EDIT:
Так с кучей более экспериментирования и чтение, у меня есть еще несколько подсказок.
Что я нашел, так это то, что любой композитный слой, по-видимому, вызывает это для меня при загрузке страницы.
Например, строка меню моего сайта position:fixed (это делает его составным). Когда я делаю меню не position:fixed, при смене страницы панель меню не мерцала. то есть остальная часть страницы пошла белой, а затем через мгновение появилось новое содержимое, но панель меню продолжала отображаться повсюду.
Мой следующий эксперимент, похоже, указывает на то, что на самом деле страница «разгружается», а не загружается новая страница, которая является проблемой. Что я подразумеваю под этим: я использовал, как обычно, -webkit-overflow-scrolling: touch; css. Что я сделал по-другому, я написал строку javascript, чтобы удалить это свойство css из контейнера через несколько секунд. Теперь, когда я изменил страницу, браузер не стал белым, прежде чем отображать новую страницу. Итак, я думаю, это означает, что это связано с тем, как браузер Safari выгружает страницу с составными слоями.
Может ли кто-нибудь подтвердить, могут ли мои подозрения иметь какую-то заслугу, или если я ПОЛНОСТЬЮ неправильно понял ситуацию?
(извинения, если моя терминология неверна, я еще немного новичок в веб-технологий)
Так что ваш сайт работает правильно без '-webkit-transform: translate3d (0,0,0);' и '-webkit-overflow-scrolling: touch;' properties? – robjez
Да, но это, к сожалению, свойства для аппаратного ускорения и гладкой прокрутки.Я надеюсь, что есть решение, которое позволяет мне сохранить их? – Bas
Похоже, вы только начинаете - но вы должны попробовать запустить ваш сайт как одностраничное JS-приложение - таким образом, страница не «перезагружается» как таковая, а действует как полноценное приложение. Это то, как современные сайты, как правило, создаются и помогают избежать такой проблемы, когда полная страница срывается и воссоздается при навигации. – dmp