Блог

В Safari (с использованием 14.1.1), а не в Firefox или Chrome, только после перехода на вкладку и возврата на страницу, элемент div позиция:фиксированный действует как позиция:абсолютная. [ПРАВКА] И страница находится в iFrame. Safari соблюдает положение:исправлено при перефокусировке окна, если страница не имеет рамки (jsfiddle создает рамки для отображаемого html).

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

См.Пример jsfiddle. Чтобы проверить: откройте jsfiddle, другую вкладку и вернитесь к jsfiddle, чтобы увидеть проблему с позицией (в Safari, работает в Chrome и FF)

 /* style */
#my-modal-container {
  min-height: 2400px;
  background-image: linear-gradient(red , yellow);
}

#my-modal {
  position: fixed;
  bottom: 13px;
  background-color: blue;
  height: 100px;
  overflow: hidden;
}

<!-- html -->
<div id="my-modal-container">
 <div id="my-modal">
   The paragraph in the modal div:
   <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </p>
 </div>
</div>

/* javascript to scroll to middle of container div */
window.scroll(0, 1000);
 

https://jsfiddle.net/khdolan/cqnkary6/

Единственный способ, которым я могу вернуть div в фиксированное положение, — это ВРУЧНУЮ прокрутить родительский div в рамке. Запрос смещения ограничительной рамки не приводит к автоматической фиксации отображения, как это работало в аналогичных ситуациях. Значения ограничивающего прямоугольника показывают, где должен находиться div ограничивающего прямоугольника, но визуальные части div на самом деле находятся выше по прокручиваемой странице (в положении:область, похожая на абсолютную).

Я нашел много сообщений о Safari iOS iFrame позиция:исправлены проблемы, но эта позиция:исправлено работает при первой загрузке, по крайней мере, на ПК. Он ломается только при перемещении по вкладкам и обратно.

У меня есть хитрое решение, чтобы изменить div на положение:абсолютное и установить сверху на window.scrollY. Но я действительно хочу знать, почему позиция:исправлены перерывы во время повторной активации вкладки в Safari.

Мы будем очень признательны за любые рекомендации.