There seems to be a issue related to elements on websites that are meant to fill the entire viewport at the same time as being positioned fixed or sticky using css.
Typical examples are full screen navigation menus like the one on New York Times as seen in the screenshots here.
we clearly see that the menu or modal will no render behind the area close to the address bar, even though the other website content will.
[Edited by Moderator]
iPhone 15 Pro
So I have not found a way to get an element to extend all the way below the viewport. Somehow this eludes me, but I have found out how apple gets it to look like it does (e.g. in their dropdown-navigation on https://apple.com )
```html
<html>
<div
style="
position: fixed;
top: 0;
left: 0;
right: 0;
display: block;
width: 100vw;
height: 48px;
"
>
<div style="background-color: #161617; height: 100vh"></div>
</div>
</html>
```
If you load this HTML in iOS 26 safari, you will see that the area underneath the url-overlay changes its background color to match #161617 .
Even though it looks like I'm doing too much here, Literally every style in here is relevant. To achieve the desired behavior, you need a fixed container (top, left, right = 0, display = block, width at least 85vw, and a height less than 50vh). Then you need to put your content (including the background color) inside this container and give it a 100vh height and then you will see a region under the overlays matching your background color, which gives it a feeling like you have a full-height navigation.
This won't work for every use case, but it worked for mine, and it is how apple seems to work around this in their main site. Kinda insane how un-intuitive it is -- feels like a bug but this work-around works.
So I have not found a way to get an element to extend all the way below the viewport. Somehow this eludes me, but I have found out how apple gets it to look like it does (e.g. in their dropdown-navigation on https://apple.com )
```html
<html>
<div
style="
position: fixed;
top: 0;
left: 0;
right: 0;
display: block;
width: 100vw;
height: 48px;
"
>
<div style="background-color: #161617; height: 100vh"></div>
</div>
</html>
```
If you load this HTML in iOS 26 safari, you will see that the area underneath the url-overlay changes its background color to match #161617 .
Even though it looks like I'm doing too much here, Literally every style in here is relevant. To achieve the desired behavior, you need a fixed container (top, left, right = 0, display = block, width at least 85vw, and a height less than 50vh). Then you need to put your content (including the background color) inside this container and give it a 100vh height and then you will see a region under the overlays matching your background color, which gives it a feeling like you have a full-height navigation.
This won't work for every use case, but it worked for mine, and it is how apple seems to work around this in their main site. Kinda insane how un-intuitive it is -- feels like a bug but this work-around works.
Safari now adapts the top and bottom UI bars based on the background color, which can cause inconsistent behavior especially with modals and full-height menus where background colors shift.
A reliable fix is to control the background at the body level using JavaScript when toggling these elements.
Example: Full-height menu
When the menu toggle is triggered:
This ensures everything behind the open menu becomes white, which forces Safari’s toolbars to switch to white as well, creating a clean, edge-to-edge
Example: Modals with overlays
If the modal uses a semi-transparent overlay:
Safari will still limit the scrolling between the top and bottom bars.
Different workaround might he needed for different cases but in nutshell that’s how you get around this stupid liquid issue
I have implemented this here so if you click book now and or open all the items in the menu and scroll (not a full height menu but same concept) when you scroll it gives it the same look apple site menu does.
Can post the JS if need for this if any of the above made sense lol.
It's faint but it shows on mine. Do you have Settings>Accessibility>Display & Text Size>Reduce Transparency enabled?
I've been frustrated by this issue the past few days. Wanted to make a loading screen, but couldn't make it full screen so the user was still able to see a bit of the website while the (supposedly fullscreen) loading screen was displayed (behind the dynamic island and the addresss bar). Wouldn't call this a great soluation, but I think this is a decent workaround in my case.
I just added display none to everything but the loading screen before the website loaded. Once the content iss fully loaded and I am triggering the fade out animation for the loading screen, I am removing the display none property and it seems to do the job.
While doing my research, I've also noticed Apple removed support for theme-color in safari which is unfortunate, leaving me (and others) to non-ideal solutions like the one described above, but I think it workss for now.
cje.churchill wrote:
This is beyond irritating.
FIX THIS APPLE!
Apple doesn't read or participate in this forum. You can, however, let them know your thoughts here:
I've been fighting with the same problem since upgrading to ios26 this morning. I've tried numerous workarounds (on my hobby site), but to no avail. I've seen the issue present on a number of other websites (specifically ones making use of full screen modals), so I'm not too worried about it at this stage. I'll hang around until there's some more detail around solving it. It's just not a great customer experience for visitors though.
All the sites I developed that use full-height or fixed positioning broke after the iOS 26 update. This is really frustrating, and the websites now look really unprofessional from the user's point of view. Have you found any workaround, or is Apple working on a fix? Should we expect an upcoming update to resolve this?
Same issue with my website. They should think about developers. Now my site looks bad. Apple makes these decisions but they should keep in mind that we have to make websites compatible with android, windows, linux. Hope they fix it as soon as possible.
[Edited by Moderator]
Notably, Apple's own website implements a workaround for this, so they knew it's an issue at launch
Can you post the workaround they use?
can Apple provide us with it?
Or do we have to wake up to such blunders ?
This is beyond irritating.
FIX THIS APPLE!
Safari iOS 26 viewport bug
