ARTICLE AD BOX
I am making a fullscreen dashboard with a toolbar that must stay at the bottom.
On Chrome (that uses webkit) on iPad, when I close the virtual keyboard, it is possible to scroll down and see the body background color under a fixed div placed at -20px from the bottom. After the closing of the virtual keyboard, it seems that the page is now more that 100% height since I am able to scroll this far...
Here is a screenshot of the behavior:
This behavior is not happening on Safari.
Is there anyway to prevent this behavior and still let the text be visible automatically just over the virtual keyboard when it is up?
html {
overflow-y: scroll;
overscroll-behavior: none;
}
body {
background-color: darkgray;
margin: 0px;
padding: 0px;
width: 100%;
}
#contentDIV {
background-color: white;
margin-top: 400px;
}
#editableDIV {
margin-top: 400px;
}
#bottomBarDIV {
background-color: aqua;
bottom: -20px;
padding: 0px 5px 0px 5px;
height: 73px;
position: fixed;
width: 100%;
padding-bottom: env(safe-area-inset-bottom);
}
<!DOCTYPE html>
<html lang="fr-ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="contentDIV" contenteditable="true">
This text is editable.
</div>
<div id="bottomBarDIV">
This is the bottom bar.
</div>
</body>
</html>
