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

There are multiple issues and bugs as far as I can tell:

1. Position: fixed top and bottom toolbar start to drift as you scroll.

2. editing in text boxes (inputs are better, and textareas much worse) causes conflicts, as it turns off fixed positions, and sometimes they are there, although not visible.

3. side menus often get cut. A fixed position scrollable side navbar typically gets cut off right above the URL line, but the background continues to be translucent all the way down to the bottom of the screen. This really looks awful.

4. top and bottom backgrounds randomly become solid (instead of translucent) to try and compensate for the position:fixed items.

Overall, I have to say this is the buggiest release of Safari for quite a few years now...

It was a Safari/WebKit issue.

The latest 26.1 beta from 2025-09-22 has fixed the issue. Now we just need to wait for it to be released or a patch to go before that.

I ran into the same issue while expanding a burger menu on iOS. I tried using 100svh/dvh/lvh and even env(safe-area-inset-bottom), but nothing worked.

Handling the body styles differently finally helped:

• On iOS, set document.body.style.position = 'fixed'.

• On other browsers, set document.body.style.overflow = 'hidden'.

This prevents the bottom widget from expanding unexpectedly and makes the element properly use the available viewport.

Try adding the height: a 100% property to elements html and body.

html {
  overflow: hidden;
  height: 100%;
}
body {
  overflow: auto;
  height: 100%
}

This will cure the problem, but the address bar will always be expanded.

This is the upcoming fix.

• Added support for remembering the last successful position-try fallback in CSS anchor positioning to reduce layout jumps when styles change. (158452223)

From here: iOS 26.1 Docs

As other comments suggest, setting the height at 100% solves the issue, but it introduces many others. I found out that it is worse when the keyboard is opened and closed.

Another thing I noticed on the header of my application, which has position: fixed, but is being scrolled out of the view, is that if I get the bounding client rect, the Y value is negative, so I tried something like this:

const handleScroll = () => {
  const headerElement = document.getElementById("app-header");
  const {y} = headerElement.getBoundingClientRect();
  if (y !== 0) {
    headerElement.style.paddingTop = ${-y}px;
  }
};
window.addEventListener("scroll", handleScroll);

The problem here is that after approximately 800 pixels are scrolled down, the Y value is 0 again, but the element is still outside of the screen, so this fix becomes useless.

I see this issue affecting multiple pages, from their own Apple website to this Stack Overflow page and basically every page with a fixed element on it, but I cannot find this issue being tracked by Apple. Is there a support page where this has been reported?

This is apparently sticky: bottom-0 is working better. Try it.

26.1 fixes it. Developer Beta 3 fixed many of the issues and DB4 fixed the rest of them.

In my case, to address the previous iOS issue, I was using.

env(safe-area-inset-bottom)

Now it seems like Apple has fixed this issue, so if any of you are using this, please remove it

iOS 26.0.1 has fixed the issue for me (for most sites).