IOS 26 Safari - Интернет -макеты ломаются из -за фиксированных/липких элементов положения, которые сдвинуты вертикально ⇐ CSS

[Anonymous]

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

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

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

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

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

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

  position

  , top , overflow , uppercroll-behavior )
• Добавление внизу: -100VH; ПЛАДИНГОВОЙ ДОЛЖНЫ: CALC (100VH + ENV (Safe-area-inset-bottom, 0)) к нижней части нижней части (это хорошо работало в других браузерах, но не в сафари 26 бета)
• Настройка следующих CSS:
  

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

  html {
  overflow: hidden;
  }
  
  body {
  overflow: auto;
  }
  < /code>
  
   Это предотвратило проблему (смещение элемента нижнего колонтитула на свитке), но у него были некоторые нежелательные побочные эффекты. Позиция прокрутки больше не поддерживается при навигации обратно на страницу, а программная прокрутка с использованием window.scrollto 

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

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