IOS 26 Safari — веб-макеты ломаются из-за смещения элементов с фиксированным/фиксированным положением по вертикали. ⇐ IOS

[Anonymous]

В Safari на iOS 26, когда страница прокручивается вниз и адресная строка сжимается внизу, область просмотра смещается вертикально, что, в свою очередь, смещает положение элементов на «фиксированное» или «прикрепленное».
Пример кода: https://codesandbox.io/p/sandbox/reactj ... ked-6zmgr4
Обратите внимание на соответствующее div служит фиксированным нижним колонтитулом со следующими встроенными стилями:

Код: Выделить всё

style={{
position: "fixed",
bottom: 0,
}}

Перейдите по URL-адресу песочницы кода на iPhone с iOS 26, чтобы воспроизвести проблему: https://6zmgr4.csb.app/
Прокрутите страницу вниз. Обратите внимание, что фиксированный нижний колонтитул больше не выравнивается по нижней части экрана. Скорее, существует зазор между нижней частью области просмотра и нижней частью фиксированного нижнего колонтитула, как показано на снимке экрана. (Текст на скриншоте перекрыт; написано: «Это должно быть исправлено в нижней части экрана при прокрутке вниз».)
Снимок экрана с проблемой
Как я могу решить эту проблему? До сих пор я пробовал следующее:

• Различные комбинации различных атрибутов CSS в элементах document и body (

  Код: Выделить всё

  position

  , top , overflow , overscroll-behavior)
• Добавление нижнего: -100vh; padding-bottom:calc(100vh + env(safe-area-inset-bottom, 0)) в нижний колонтитул (в других браузерах это работало нормально, но не в бета-версии Safari 26)
• Установка следующего содержимого CSS:

  Код: Выделить всё

  html {
  overflow: hidden;
  }
  
  body {
  overflow: auto;
  }
  

  Это предотвратило проблему (смещение элемента нижнего колонтитула при прокрутке), но привело к некоторым нежелательным побочным эффектам. Положение прокрутки больше не сохраняется при переходе обратно на страницу, а программная прокрутка с использованием window.scrollTo перестает работать. Кроме того, адресная строка больше не сжимается в нижней части экрана, когда пользователь прокручивает вниз.

Подробнее здесь: https://stackoverflow.com/questions/797 ... elements-g