Bug 301108 – REGRESSION (iOS 26): <meta name="viewport"> does not work correctly for viewport-fit=cover or height=device-height

• Status: NEW
• Component: Layout and Rendering

[Alex]

Created attachment 477143 [details]
HTML page to reproduce the issue

After iOS26 update with the new see-through address bar in Safari, every full page content on the web is broken because <meta name="viewport"> no longer works as expected.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport#viewport-fit

> cover: The viewport is scaled to fill the device display. It's highly recommended to use the safe area inset variables to ensure that important content doesn't end up outside the display.

Same with height=device-height:

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport#height

> special value device-height, which is the physical size of the device screen in CSS pixels

It is supposed to make viewport same as physical size and cover entire screen with top and bottom areas handled by env(safe-area) variables, but it does not.

I've attached the very basic reproduction using a full page overlay that blurs everything underneath.

[Alex]

Created attachment 477144 [details]
A screenshot of the issue as it is rendered on iOS26

[Radar WebKit Bug Importer]

<rdar://problem/163501215>

[Alex]

Created attachment 478047 [details]
Fixed header

Happy new year. Any plans to fix the web? Another absolutely ridiculous case I ran into with this issue is this:

1. Page has a position fixed non-transparent header
2. Content is visible above it through liquid glass header

How could you not even think about fixed headers on the web? Are you all just vibecoding these days? Attached a screenshot.

[Alex]

Looks like at some point this was fixed and I no longer see content behind the header on the latest iOS. However another clear case where your color guessing game fails is toggling dark/light mode on the website. I update values of CSS variables on the body and my header turns dark. Liquid glass header remains light. When I refresh the page and pull mode from localStorage so that it is dark as soon as possible – it it properly dark in the header too.