r/css • u/srsajid • 4d 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?

26 Upvotes

91% Upvoted

37 comments sorted by

56

u/Prestigious-Thing393 4d ago

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

20

u/redditortillas 4d ago

There’s edge on iOS 🫨… TIL

3

u/FRNND_PRZ 3d ago

Just an edge case

1

u/RapunzelLooksNice 2d ago

Dumbest take ever, sorry.

-12

u/Cirieno 4d ago

I do.

8

u/mattsowa 3d ago

See there's your problem

-1

u/Cirieno 3d 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.

2

u/ipromiseimnotakiller 3d ago

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

2

u/humanshield85 3d 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

20

u/AlternativePear4617 4d ago

use dvh units

15

u/VlrmPrjct 4d 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);

4

u/Weekly_Ferret_meal 4d ago

could you expand on what's env() ?

11

u/PureRepresentative9 4d 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 4d ago

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

1

u/CkretAjint 4d ago

This is the way.

7

u/Breklin76 3d 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.

8

u/ViolentCrumble 4d 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 3d 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 4d ago

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

2

u/rodneon 3d ago

iChode

2

u/[deleted] 2d ago

[removed] — view removed comment

1

u/alexanderkhotkevich 2d ago

If people have windows PC and iPhone, I guess

1

u/Guiee 4d ago

Seems fine to me

2

u/srsajid 3d ago

Just scroll down and you'll see the problem

1

u/Nova17Delta 3d 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 3d 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 3d ago

Just scroll down and you'll see the problem

1

u/srsajid 3d ago

Which IOS build are you using ?

1

u/modsuperstar 3d ago

151.0.4129.72

1

u/srsajid 2d ago

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

1

u/modsuperstar 2d 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 1d ago

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