fix(layout): add support for iOS safe area

[WarningImHack3r]

Add support for iOS' safe area environment variables to prevent the navbar from being hidden behind the iPhone's home bar.

It works using the official Webkit guide, which was originally made after the introduction of the iPhone X with iOS 11.
It exposes the env() CSS function with 4 variables (safe-area-inset-{top,left,right,bottom}), requiring viewport-fit=cover in the viewport meta tag to get rid of natural viewport margins (edit: apparently not needed from my testing, removed it - probably only required for the left/right variants? needed for iOS 26.1+ PWAs!).

These environment variables are smartly populated by the system based on the current Safari layout, giving them a value granularly as needed.

Note

You might note my PR doesn't include the outdated constant() function, the previous name of env() between iOS 11.0 and 11.2 beta versions: the already low range of concerned versions combined with the ancient age of this major iOS version isn’t worth the effort, in my opinion.
It can, however, be easily added at will with @supports queries or CSS rules fallbacks after bypassing calc() calls.

On desktop, the env() function is (supposedly) undefined, invalidating the CSS lines using it, leading to no repercussions on desktop browsers or other mobile browsers. I've tested it on Arc / Chrome desktop in responsive mode and noticed no impact.

Demo

Before (old Safari layout/in-app browser)	After (old Safari layout/in-app browser)

After (old Safari layout/in-app browser - "unscrolled" state)	After (new Safari layout - not impacted)

---

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time.
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.

[vercel]

@WarningImHack3r is attempting to deploy a commit to the Svelte Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
svelte-dev	Ready	Preview	Feb 24, 2026 10:14am

[teemingc]

I tested the changes on an iPhone 16 with iOS26 by adding the site to the home screen as a web app. Sadly, it doesn’t work there. Can you verify this too?

[WarningImHack3r]

Fixed thanks to this forum answer (for reference)

Left: unchanged iOS 18 inside Safari / Right: iOS 26.2 PWA

And while we're at it, full iOS 26 showcase (unaffected by this last patch):

Safari 26 (large)	Safari 26 (compact)