css – iOS 26 Safari – Net layouts are breaking attributable to mounted/sticky place parts getting shifted vertically

In Safari on iOS 26 beta, when the web page is scrolled down and the handle bar shrinks on the backside, the viewport seems to get displaced vertically which in flip shifts the place of parts with place “mounted” or “sticky.”

Code instance: https://codesandbox.io/p/sandbox/reactjs-playground-forked-6zmgr4

Be aware the related div serving as a hard and fast footer, with inline types as follows:

fashion={{
  place: "mounted",
  backside: 0,
}}

Navigate to the code sandbox url on iPhone with iOS 26 beta to breed the difficulty: https://6zmgr4.csb.app/

Scroll down the web page. Discover that the mounted footer is not aligned to the underside of the display screen. Somewhat, there’s a hole between the underside of the viewport and the underside of the mounted footer as proven within the screenshot. (The textual content is obstructed within the screenshot; it reads “This needs to be mounted on the backside of the display screen after I scroll down.”)

Screenshot of subject

Any strategies for the right way to handle this? Up to now I’ve tried the next:

• Varied mixtures of various css attributes on the doc and physique parts (place , high , overflow , overscroll-behavior )

• Including backside: -100vh; padding-bottom: calc(100vh + env(safe-area-inset-bottom, 0)) to the footer (this labored superb in different browsers, however not in Safari 26 beta)

• Setting the next css:

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

  • This prevented the difficulty (footer aspect shifting on scroll), nevertheless it had some undesired negative effects. Scroll place not will get maintained when navigating again to the web page, and programmatic scroll utilizing window.scrollTo stops working. Additionally, the handle bar not shrinks on the backside of the display screen when the person scrolls down.