3

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?

Alejandra Cabeza
  • 31
  • 2

1 Answers1

0

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;
}
Varofon
  • 1