css – iOS 26 Safari – Web layouts are breaking due to fixed/sticky position elements getting shifted vertically

In Safari on iOS 26 beta, when the page is scrolled down and the address bar shrinks at the bottom, the viewport appears to get displaced vertically which in turn shifts the position of elements with position “fixed” or “sticky.”

Code example:

Note the relevant div serving as a fixed footer, with inline styles as follows:

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

Navigate to the code sandbox url on iPhone with iOS 26 beta to reproduce the issue:

Scroll down the page. Notice that the fixed footer is no longer aligned to the bottom of the screen. Rather, there is a gap between the bottom of the viewport and the bottom of the fixed footer as shown in the screenshot. (The text is obstructed in the screenshot; it reads “This should be fixed at the bottom of the screen when I scroll down.”)

Screenshot of issue

Any suggestions for how to address this? So far I’ve tried the following:

• Various combinations of different css attributes on the document and body elements (position , top , overflow , overscroll-behavior )

• Adding bottom: -100vh; padding-bottom: calc(100vh + env(safe-area-inset-bottom, 0)) to the footer (this worked fine in other browsers, but not in Safari 26 beta)

• Setting the following css:

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

  • This prevented the issue (footer element shifting on scroll), but it had some undesired side effects. Scroll position no longer gets maintained when navigating back to the page, and programmatic scroll using window.scrollTo stops working. Also, the address bar no longer shrinks at the bottom of the screen when the user scrolls down.