Iphone safari not resizing viewport on keyboard open

Question

Mobile safari doesn't update the window.innerHeight when the keyboard pops up. (at least in 9.3.5, and there are several answers like this one, with comments saying that broke in ios 8.2)

Apple documentation says used to say before they edited it that window.innerHeight will be back with iOS 10.

In iOS 10, WKWebView objects match Safari’s native behavior by updating their window.innerHeight property when the keyboard is shown, and do not call resize events.

I need to know what to do in the meantime to deal with the iphone safari just pushing the website out of the view, instead of resizing.

---

I have an application that uses absolute positioning for everything, and has a div with overflow between the header and the footer.

.mainContent {
  position: absolute;
  top: 50px;
  bottom: 28px;
  left: 0;
  right: 0;
}

Plunker here.

Screenshots, working as expected on android:

Not working as expected on iphone:

Based on this answer I have a native JS way of determining if the iphone keyboard is open,

    document.getElementById('chat-input').addEventListener('focus', function(){
      if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
        console.log("IOS focus");
        var scroll = window.scrollTop;
        window.scrollTop = 10;
        var keyboard_shown = window.scrollTop > 0;
        window.scrollTop = scroll;

        if(keyboard_shown){
          console.log("keyboard");
        }else{
          console.log("no keyboard");
        } 
      } 
    });
  })();

But that doesn't actually solve the problem as the window.innerHeight doesn't change, so I don't know how big the keyboard is. I could just make a list of iphone resolutions, and their keyboard heights, and just be a terrible hardcoding person...

Solution 1

As of March 2021, window.innerHeight DOES reflect the presence of a soft keyboard on iPad running IOS 14.4.1

Solution 2

As of iOS 13 this appears to have been solved by using the VisualViewport API implementation.

Solution 3

Safari 10 Docs

Safari and WKWebView on iOS 10 do not update the window.innerHeight property when the keyboard is shown. On previous versions of iOS WKWebView would update the window.innerHeight property when the keyboard is shown.

Seems docs now state the opposite behavior of that noted by OP

Comments

[JoannaFalkowska]

Can you provide a screenshot? I don't own iPhone but would want to know what's actually the issue here.

[mtfurlan]

@Senthe Sorry that took so long, I don't own one either and had to go into work. But images are now in the question.

[JoannaFalkowska]

I understand now. I don't think it's possible to do anything with this behaviour here. The same happens even with fixed property. Your hardcoding "solution" probably won't work either as I assume it's possible on iOS to install non-native keyboard app. If I were you I would be happy that at least the bottom part where you type messages stays in the right place. : (

[mtfurlan]

@Senthe Yeah, I guess that's all I can do for now. Thanks for the help.

[Dhunt]

I might be missing something but window.scrollTop = 10; var keyboard_shown = window.scrollTop > 0; will always be true

[mtfurlan]

@Dhunt I just copied it from the jquery in the linked question to native js and assumed it had something to do with how the viewport is off the screen. I dunno. We gave up on trying to fix this, so I unless you really want to know, I'm not going to try to test. Now that I think about it, it was a hack to deal with bluetooth keyboards, which don't really matter and just going off the focus event would probably have been fine...

[mtfurlan]

...They edited their pre-release. I'm impressed. "We've always been at war with Eastasia" and all that. web.archive.org/web/20160613195513/https://developer.apple.c‌​om/…

[Alex Titarenko]

VisualViewport API did the trick, many thanks, was looking for this!!!

[mtfurlan]

I'm very thankfully no longer in the business of touching apple products, but I'm just going to assume this is correct and mark it as such.

[den232]

@mtfurlan, thanks for the answerifying, but sorry to hear you're in non-apple-land. Cheers jb