CODEWITHSUNDEEP
htmlcssiossafarimobile-safari
Nolan Gelinas
Nolan Gelinas

Reputation: 83

safe-area-inset-bottom not working on ios 15 safari

I'm trying to get my website to fit inside my phone screen. I have tried many variations of env(safe-area-inset-bottom) and constant(safe-area-inset-bottom) but both always return 0px (I've been using an app called Inspect to debug CSS on my iPhone 13).

Here's a link to the github repo. All code that relates to this issue should be in /src/app.tsx. Here is a link to the live site if you want to see the problem yourself.

UPDATE: I've been doing some testing and have found that in portrait mode, safe-area-inset-* is ALWAYS 0px, but in landscape mode it works as expected. Does this mean that safe-area-inset-* isn't the correct solution for ios 15 safari? Clearly the url bar obscures the 'safe area' in portrait mode...

I've made sure to add <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> to my head tag but this has no effect. Could someone please explain how I can ensure that my site doesn't go past the bottom URL bar on ios 15 Safari? I've attached screenshots from my phone showing the problem:

Keyboard goes past URL bar

What I want the keyboard to look like

Upvotes: 7

Views: 20111

Answers (2)

pejalo
pejalo

Reputation: 981

If you are getting 0px from env(safe-area-inset-bottom) then the browser is probably reporting its safe area as expected. Safari on iOS has this bottom navigation bar that animates in and out as the user scrolls. Also if the user taps on something within the bottom safe-area, the browser scrolls up the page (showing the navigation bar) to make that area of the page available, so the user can tap again. It's wonky. I believe that the 0px reported by Safari is indeed the safe area that you, the developer, are expected to handle in this context (none).

If you have a .webmanifest file with the display="standalone" option, and tap the share/export button within Safari to "Add to Home Screen", you can open and view the page without browser UI. From testing on the iOS 14 and 15 simulators, in this context I am getting 34px for the bottom safe area.

Upvotes: 1

pronebird
pronebird

Reputation: 12260

I think I made it work using -webkit-fill-available the other day which respects safe area.

body {
    min-height: -webkit-fill-available;
}

Upvotes: 4

Related Questions