1

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.

fer0n
  • 295
  • 1
  • 5
  • 14

1 Answers1

5

Turns out: for env(safe-area-inset-bottom) to work, hiding the bottom bar by using the "hide toolbar" option won't work. Instead, it has to disappear through scrolling.

It appears that for it to work the body itself has to scroll (so no height: 100% or overflow: scroll in any parent.

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>
fer0n
  • 295
  • 1
  • 5
  • 14
  • On potrait mode, it doesn't work Safari 15.3.1 iPhone 11. However it does work on landscape mode, which is really weird – muhajirframe Aug 08 '22 at 03:44