Post

I noticed a pretty bad bug with fixed elements, they get shifted up sometimes. Relaunching Safari fixes the issue (temporarily). Does that maybe help with the bad behaviors you've noticed?

That lines up with what I saw yesterday (*). The entire viewport shifts up (and therefore also fixedpos elements) and it’s stuck halfway underneath the clock. (*) For some reason I can’t reproduce this today. See blue box in the attached screenshots for yesterday (11PM-ish) and today (10AM-ish)

In my case the fixed elements (possibly the entire viewport actually, but not noticeable on a normal page) go up and down as I scroll the page. They end up in the right position when Safari's UI is expanded, and too high up when it is collapsed. Showing the keyboard seems to trigger the behavior.

Not to mention the bug where fixed element with top:0; sometimes go under the status bar, depending on the direction of scroll. Oh, and the completely unpredictable way Safari seems to color the status bar and space behind the address bar based on the backdrops it thinks are relevant. It’s a mess.

Here is Apple.⁠com struggling with these viewport bugs:

You can clearly see that the modal backdrop is cut off

My observation is that on iOS (in portrait mode) the behavior is _always_ `viewport-fit=contain` and on iPadOS it’s always `viewport-fit=cover` … 🤷‍♂️

I’m curious whether the safe-area-inset solves this? webkit.org/blog/7929/de...

No, it's a bug. The problem shown in the screenshots is that the entire viewport shifts up. This bug gets triggered after you've focused an input. Safe area insets help when you've got `viewport-fit=cover` set … but Safari on iOS (in portrait mode) refuses to do so :-/

The latter could be a design choice, but I think it's a step back because it prevents you from having a backdrop that actually spans edge-to-edge. See attached screenshots: the blurred backdrop does not go behind the top and bottom bars. This is something native apps are allowed to do.

The viewport behavior of Safari 26 on iPadOS is behaving much better than on iOS. A quick check tells me using `viewport-fit` in the viewport meta tag doesn’t do anything. It’s always kinda like `cover` but without it extending to underneath the address bar (which you could do before IIRC)

Also: what’s up with that padding on the left you get when the window becomes wider? Maybe this is for Stage Manager (which I am not using)?

(The `viewport-fit=cover`-like behavior on iPadOS is the exact opposite of the behavior on iOS, where it always uses `viewport-fit=contain`)