Issue
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:
Adding the padding with padding-bottom: 50px works as expected:
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.
Solution
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.
* {
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>Answered By - fer0n
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.