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...

Can you provide a screenshot? I don't own iPhone but would want to know what's actually the issue here. — JoannaFalkowska, Sep 10 '16 at 00:13
@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. — mtfurlan, Sep 11 '16 at 18:10
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. : ( — JoannaFalkowska, Sep 12 '16 at 08:36
@Senthe Yeah, I guess that's all I can do for now. Thanks for the help. — mtfurlan, Sep 12 '16 at 13:17
I might be missing something but window.scrollTop = 10; var keyboard_shown = window.scrollTop > 0; will always be true — Dhunt, Sep 17 '16 at 12:50
@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, Sep 17 '16 at 17:31

score 17 · Answer 1 · answered Nov 26 '19 at 17:57

17

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

answered Nov 26 '19 at 17:57

Matan Hershberg

171
1
2

VisualViewport API did the trick, many thanks, was looking for this!!! – Alex Titarenko Jan 26 '21 at 07:24

score 5 · Answer 2 · edited Jun 20 '20 at 09:12

5

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 13 '16 at 09:58

blackmamba

757
5
21

3

...They edited their pre-release. I'm impressed. "We've always been at war with Eastasia" and all that. https://web.archive.org/web/20160613195513/https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html – mtfurlan Nov 14 '16 at 17:12

score 1 · Accepted Answer · answered Mar 19 '21 at 14:03

1

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

answered Mar 19 '21 at 14:03

den232

682
6
14

3

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. – mtfurlan Mar 19 '21 at 14:47
@mtfurlan, thanks for the answerifying, but sorry to hear you're in non-apple-land. Cheers jb – den232 Mar 19 '21 at 18:54

Iphone safari not resizing viewport on keyboard open

3 Answers3

Linked