svelte.dev

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 CSS function with 4 variables (), requiring in the 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 function, the previous name of 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 queries or CSS rules fallbacks after bypassing calls. On desktop, the 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 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. [x] Prefix your PR title with , , , or . [x] This message body should clearly illustrate what problems it solves.