Bug 306465 – viewport-fit=cover is not respected on iOS in portrait mode

• Status: NEW
• Component: New Bugs

[Bramus]

Created attachment 478183 [details]
Safari 26, Portrait Mode, Page with viewport-fit=cover

When you set `viewport-fit=cover` in the viewport meta tag, you are instructing the browser to have the viewport scale so that it fills up the entire viewport.

This works on iOS in Landscape mode, but not in Portrait mode.

I would have expected that in portrait mode, the green bars would be painted against the top and bottom edges of the screen.

(Authors should then also use the safe-area insets to prevent content from painting underneath the unsafe regions)

Demo Page: https://interop-2022-viewport.netlify.app/individual/safe-inset-areas/viewport-fit-cover

Use-case: have a bottom-fixed toolbar that is opaque and whose color extends into the region where the address bar is rendered.

[Bramus]

Created attachment 478184 [details]
Safari 26, Landscape Mode, Page with viewport-fit=cover

[Radar WebKit Bug Importer]

<rdar://problem/169140065>

[Bramus]

Supporting `viewport-fit=cover` would solve user complaints like https://modernwebweekly.substack.com/i/179552520/the-curious-case-of-the-status-bar-on-ios-26, because with `viewport-fit=cover` authors gain control over things.