мобильное сафари на белом фоне

Question

Я создаю веб-приложение исключительно для iPad / mobile-Safari.Домашняя страница - это обычная HTML / CSS-страница с 3 основными разделами.Но как только вы нажмете на одну из 3 основных кнопок, вы попадете на страницу, созданную с 2 iFrames (один сверху для Nav, один снизу для контента)

Проблема заключалась в том, что раньше любой из этих 3страницы загружались, была быстрая вспышка белого цвета, а затем страница загружалась.Я попытался скрыть стиль видимости iframe, а затем onLoad изменить его на «видимый», и это сработало.Но это сработало только один раз, когда сначала создается страница, созданная в iFrame.Как только он загружается, и я нажимаю на ссылку на этой странице, белая вспышка возвращается, потому что iFrame уже загрузился, так что он уже виден.

Я пробовал очевидное, как добавление стиля css в iframe с фономцвет (также пробовал встроенный стиль), но произошло то же самое.Есть идеи, как это решить?Спасибо!

Answer 1

Вы можете сделать этот чит:

<iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe>

В содержании вы можете поймать все ссылки и формы:

document.getElementsByTagName("a").addEventListener("click", function(e){
    window.top.document.getElementsByTagName("iframe")[0].style.visibility = "hidden";
});

Объясните:

• В первый раз ваш iframe скрыт, и вы можете видеть фон главной страницы (не белый из iframe)
• После загрузки Javascript сделает видимым iframe, и вы сможете увидеть содержимое и фон iframe.
• При нажатии на ссылку внутри iframe срабатывает триггер, и Javascript снова скрывает iframe.

Я встречал эту проблему, и это целый день, чтобы попытаться исправить, но я не могу, кроме как выше. Эту проблему можно встретить в Chrome, Firefox и других браузерах, а не только в Safari Mobile.

Answer 2

Я сталкивался с этой проблемой, нашел много решений, как упоминает КимХа.

Ни одно из решений не помогает в дальнейшем переходе страниц в iframe, и его скрытие действительно не является хорошим решением.

С большим количеством ошибок и ошибок я придумал следующее, которое исправило проблему с белой флеш-памятью перехода IOS WebKit iFrame, по иронии судьбы, это такое простое решение:

Просто добавьте это в свой CSS

html{background:#000}

измените цвет на желаемый.

Похоже, что основная проблема с веб-набором IOS заключается в том, что когда iframe вызывает другую страницу, IOS удаляет тело с текущей страницы за долю секунды до рендерингаконтент с новой страницы.заставляя HTML иметь цвет фона (по умолчанию он будет белым), это устраняет мерцание белого.

Также обратите внимание, что если ваш сервер не разрешает кэширование файла .css, предоставляющего стили, вывсегда будет мерцать.

В apache для обеспечения кэширования посмотрите на

ExpiresByType text/css "access plus 30 days"

Answer 3

Я думаю, то же самое с КимХа.Но иногда «видимость» не работает, поэтому я думаю, что лучше использовать «непрозрачность».

<iframe src="..." style="opacity:0;" onload="this.style.opacity=1;"></iframe>