Search code examples
htmlcssmobile-safari

env(safe-area-inset-bottom) not working in css

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.

Solution

  • 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>