Login/Register
env(safe-area-inset-bottom) not working in css
Asked Answered
Solved htmlcssmobile-safari
C

1

5

I can't get env() to work.

* {
  padding: 0;
  margin: 0;
}

.testclass {
  background-color: green;
  padding-bottom: env(safe-area-inset-bottom);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="testclass">Hello there</div>
  </body>
</html>

This is what it looks like:

enter image description here

Adding the padding with padding-bottom: 50px works as expected:

enter image description here

What am I doing wrong here?

EDIT: I figured it mostly out (see answer), but it's still not working when adding the website to the home screen. Maybe that has something to do with Webpack.

Cryptography answered 13/7, 2022 at 4:19 Comment(0)
C
8

It appears for env(safe-area-inset-bottom) to work, the body itself has to scroll (so no height: 100% or overflow: scroll in any parent.

Also: hiding the bottom bar by using the "hide toolbar" option doesn't work. Instead, it has to disappear through scrolling.

demonstration

* {
  padding: 0;
  margin: 0;
}

.testclass {
  margin-top: 100px;
  background-color: green;
  padding-bottom: env(safe-area-inset-bottom);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="testclass">Hello there</div>
    </div>
    <div style="height: 120vh"></div>
  </body>
</html>
Cryptography answered 15/7, 2022 at 6:42 Comment(1)
On potrait mode, it doesn't work Safari 15.3.1 iPhone 11. However it does work on landscape mode, which is really weird – Georgiannegeorgic

© 2022 - 2024 — McMap. All rights reserved.