У нас есть веб-сайт, который хорошо отражается на всех браузерах и устройствах, за исключением того, что вы впервые открываете его в Safari mobile (или Safari Mac на узких экранах).
Веб-сайт: http://sheriff.org/
Воспроизведение на iPhone Safari:
- Откройте веб-сайт в частном режиме
- Обновить страницу
Воспроизведение в Safari для Mac:
- Открыть Safari в приватном режиме
- Переключить агент пользователя на iOS - iPhone (Разработать > Пользовательский агент > Safari - iOS - iPhone)
- Измените размер браузера на приблизительную ширину мобильного устройства.
- Откройте веб-сайт
- Обновить страницу
Ожидаемый: Страница должна показывать тот же первый и второй раз
Actual: В первый раз в частном режиме видна только зеленая рамка Во второй раз страница полностью отображается
Выводы: Я попытался сравнить обе страницы (когда она отображается правильно, а когда рендер разбит), чтобы увидеть, есть ли какая-то разница, чтобы узнать, что в обоих случаях страница имеет тот же HTML и CSS.
Если вы проверяете какие-либо элементы, которые не отображаются при первой попытке (которые должны отображаться правильно после обновления страницы), вы не найдете никакого стиля, который влияет на видимость элемента (например, opacity, display, visibility, position,... и т.д.)
UPDATE:
Кажется, что в Safari Console Unhandled Promise Rejection: [object DOMError] есть ошибка, которая может вызвать эту проблему,
Я провел исследование и выяснил, что это может быть вызвано автоматическим воспроизведением видео на странице (на странице есть видео, но видео воспроизводится, даже если эта ошибка возникает), поэтому я считаю, что должна быть другая причина, почему эта ошибка выбрасывается
Любые советы о том, почему мы наблюдаем такое поведение в Safari, высоко ценятся.