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>