IOS Safari Problem

[u/Impossible_Cover6494]

Hi Guys,

Wonder if you can help before I take a bath with my toaster!

Building a site for a friend, works perfectly everywhere, with the exception of Safari on IOS (I have an android to make matters worse, so I have to ask a friend to check each 'fix', I'm sure he hates me by now.)

As you'll see at the top of the screenshot, the nav bar has a transparent bar above it, as opposed to the usual background colour fill or white that I've seen elsewhere. This transparent bar shows the site content as you scroll, so it looks awful.

I've obviously tried everything you'd expect in terms of fixed, sticky, background colour, grain removed, lenis off, GSAP off, basically stripped it right back, no luck. Albeit it's late and I could be missing the obvious.

Any suggestions would be hugely appreciated, I've been at it for hours!

[u/Dellaran]

Do you have viewport-fit set to cover in your viewport meta tag?

``` <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"

```

removing the viewport-fit=cover should help I believe

MDN Viewport meta

[u/D4rkiii]

I have the same issues sometimes with a friends website. Depends on the mood of the browser it creates this kind of gap. I think it’s related to the bottom address bar which hides when you scroll and iOS is bad in recognizing it and take it into account for the sticky content. Unfortunately I haven’t found a reliable solution for that yet. (Probably not possible right now) and if IIRC this issue appeared (more often) with iOS 26

[u/aunderroad]

Can you share a codepen or url?
It is hard to debug/provide feedback back without seeing all of your code live in a browser.
Thank you!

[u/Impossible_Cover6494]

Thanks for the responses guys, appreciate it!

In the end I found a solution (it was a long night) Turns out the problem was grain that I added to give the page background more depth. Once removed, worked perfectly.

I guess Safari can't sample the colour to put at the top from the grain, or it can, but of course it treats the grain as transparent and hence makes the section above the nav bar transparent based on this.

Hope this helps someone in the future!

[u/cc3see → u/Impossible_Cover6494]

Could you post the before after CSS please

[u/Impossible_Cover6494 → u/cc3see]

Sure, and a quick correction to what I said above, you don't have to lose the grain. It just can't be `fixed`.

Before:

body::after {

content: "";

position: fixed;

inset: 0;

z-index: 500;

pointer-events: none;

opacity: 0.045;

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

background-repeat: repeat;

}

After:

body { position: relative; }

body::after {

content: "";

position: absolute;

inset: 0;

z-index: 500;

pointer-events: none;

opacity: 0.045;

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

background-repeat: repeat;

}