I am building a chatbot in vanilla Javascript, it works just fine in Android phones but in iPhones shows a blank space when the keyboard is open and I scroll down. I read that the "safe area" is causing but I´m not really sure how to fix it in vanilla JavaScript.
I tried doing this https://developer.mozilla.org/en-US/docs/Web/CSS/env but it doesn´t seem to work.
The image looks like this Blank space coming between keyboard and UIVew in iOS
Any ideas?
The issue is caused by overscroll, not the safe-area.
And unfortunately there is no easy way to fix it. The way I did it was by applying this plugin (https://github.com/willmcpo/body-scroll-lock) to container that should be scrollable while keyboard is open and adding this styles to it, so it becomes scrollable on it's own while body scroll is locked
.ios-scroll-container {
position: fixed;
top: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}