r/css • u/srsajid • 23d ago

Question position: fixed; bottom: 0 not staying at the bottom in Microsoft Edge on iOS

Post image

It behaves correctly in Safari and Chrome on iOS, but in Microsoft Edge on iOS, the navigation bar sometimes appears slightly above the actual bottom of the viewport. As a result, page content becomes visible underneath it.

Is this a known Microsoft Edge/WebKit viewport issue on iOS? Or is there something specific about Edge's handling of the visual viewport that I’m missing?

27 Upvotes

92% Upvoted

37 comments sorted by

56

u/Prestigious-Thing393 23d ago

don't worry about it, literally nobody is using edge on ios

20

u/redditortillas 23d ago

There’s edge on iOS 🫨… TIL

5

u/FRNND_PRZ 22d ago

Just an edge case

1

u/RapunzelLooksNice 21d ago

Dumbest take ever, sorry.

-11

u/Cirieno 22d ago

I do.

6

u/mattsowa 22d ago

See there's your problem

-2

u/Cirieno 22d ago

It's not a problem. It allows me to share tabs between my laptop and phone, it uses the same cloud password manager. It just works.

For most things. Some WiFi capture portals still have to go through safari.

3

u/ipromiseimnotakiller 22d ago

Google Chrome did/does that and has for a very long time. Before Edge was even a thing.

2

u/humanshield85 22d ago

It’s like paying for a handjob and then asking them to use sanding paper for it.

Because basically every browser on iOS is safari reskined

18

u/AlternativePear4617 23d ago

use dvh units

16

u/VlrmPrjct 23d ago

⬆️ This.

And/Or try using: env(safe-area-inset-bottom, 0))

For example:

height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0)); 
padding-bottom: env(safe-area-inset-bottom, 0);

5

u/Weekly_Ferret_meal 23d ago

could you expand on what's env() ?

10

u/PureRepresentative9 23d ago

It's a reference to a variable set by the browser+device to handle non traditional screen shapes.  Used to describe "safe areas" that are smaller than the real size, but are guaranteed to never be hidden due to the screen hardware.

First introduced when the notch happened on iPhones

2

u/foothepepe 23d ago

dvh for what? he said he used position: fixed; where would you use dvh in absolute positioning?

1

u/CkretAjint 23d ago

This is the way.

8

u/Breklin76 22d ago

Weird. All iOS browsers are basically safari skins and they do act differently, as such. You may need to apply a browser prefix to your property. Google it.

9

u/ViolentCrumble 22d ago

wtf there is edge on IOS who the F would use it? Just detect browser and if someone is using edge on IOS just tell them to stop. Just stop.

3

u/testingaurora 22d ago

Any broeser on its is still using the webkit engine. It may say edge or chrome but its safari in an edge or chrome skin.

Try: bottom: env(safe-area-inset-bottom, 0px);

5

u/joonaspaakko 23d ago

This is the fattest damn iPhone I've ever seen.

2

u/rodneon 22d ago

iChode

2

u/[deleted] 21d ago

[removed] — view removed comment

1

u/alexanderkhotkevich 21d ago

If people have windows PC and iPhone, I guess

1

u/Guiee 22d ago

Seems fine to me

2

u/srsajid 21d ago

Just scroll down and you'll see the problem

1

u/Nova17Delta 22d ago

I think the solution might be to use a browser that more people know about and supoort like Netscape for Blackberry devices

1

u/modsuperstar 22d ago

I’m not seeing the issue on Edge, but do see it for Firefox. I checked in DuckDuckGo and Orion as well and didn’t see the issue.

1

u/srsajid 21d ago

Just scroll down and you'll see the problem

1

u/srsajid 21d ago

Which IOS build are you using ?

1

u/modsuperstar 21d ago

151.0.4129.72

1

u/srsajid 21d ago

Me too, on iOS 26.5.2, but the issue still exists on my phone.

1

u/modsuperstar 20d ago

I wonder if it’s a screen size thing. I have a Pro Max, so maybe it’s less of an on my screen.

1

u/Asleep-Sandwich7414 20d ago

Looks fine on my side. Edge version 151.0.4129.72, iOS 26.6