How to fix <Webview/> viewport in place when virtual keyboard open in iOS Safari?

How to / Third Party Tooling
1

Goal

On mobile Safari, when the virtual keyboard is open, the screen should render like this image:

Screen Shot 2020-01-02 at 3.09.43 pm
Screen Shot 2020-01-02 at 3.09.43 pm387×677 38.2 KB

where:

  • The navbar and the input are fixed in place
  • The list of text messages is scrollable

There’s been a lot posted on Stack Overflow about iOS dropping its position: fixed property once the soft keyboard is open, but I’ve been unable to find a solution that works for me.

Problem

On mobile Safari, when the soft keyboard is open, dragging on the input or navbar can move the entire viewport up and down.

I have a screen capture video demonstrating the problem: ioskeyboardproblem HD 1080p - YouTube

Background

This app is a hybrid mobile app: built as a web app with React.js, but wrapped in a React Native app using the WebView component.

Mobile Safari has a related problem where the soft keyboard pushes the whole viewport up when it is opened, so that the top half of the view port is pushed up and off the screen. This blog (1) provides both and description of that problem and a solution for it. I implemented that solution. It stopped the viewport from moving up when the soft keyboard opens, but the viewport can still slide around after the soft keyboard opens.

Another problem is that mobile Safari doesn’t update window.innerHeight when the soft keyboard is opened/closed. To get around this, I used react-native-keyboard-spacer in the React Native app, a bit like this:

render() {
    return (
      <React.Fragment>
        <SafeAreaView >
          <WebView/>
        </SafeAreaView>
        <KeyboardSpacer />
      </React.Fragment>
    );
  }

This changes the height of the whenever the soft keyboard opens/closes, and thus window.innerHeight etc also changes.

It’s also known that position: fixed; on mobile Safari doesn’t work so well when the soft keyboard is open, so I used position: absolute; instead, thanks to the suggestions at this other blog (2). Unfortunately, this didn’t help.

I created a code sandbox to demonstrate the problem and the closest I’ve got to solving it. It has a couple of differences to what I’ve described above, though. There’s no WebView or KeyboardSpacer: it’s just a web page. As such, I’ve had to hardcode some heights in. But if you open it in mobile Safari you’ll see the viewport sliding all over the place once the soft keyboard is open.

Has anybody dealt with this before in any of your hybrid apps? How did you fix it? I’ve been stuck oaths for months, so I’d really appreciate any help anyone could give.

Note

On this forum, new users can only put two links inter posts, so you’ll need to Google to find these posts. Sorry!

  1. Google “The eccentric ways of iOS Safari with the keyboard”
  2. Google “Safari and position fixed”
1 Like
2

Here’s the link to the actual code sandbox that you can play in: bold-paper-brn2f - CodeSandbox