Keyboard Dismissal Leaves Viewport Shifted in iOS 12 / XCode

I don't know if this will help you, but from iOS 11 there are CSS constants defined in the webview for all of the "safe areas".

I use full-screen, but put a transparent "spacer" div at the top of the screen, which equals the height of iOS system status bar, any safe area (depending on device) and any fixed-height page header. My content scrolls "under" all of this. The spacer insures that the content lines-up just below the fixed header when scrolled to top.

You will have to make use of the new CSS constants in a way that makes sense for your app layout. Google for 'safe-area-inset CSS'

I do something like this (SCSS):

.os_status_bar_spacer {
margin: 0;
padding: 0;
width: 100%;
height: $ios_status_bar_height;
height: constant(safe-area-inset-top); // < ios 11.2
height: env(safe-area-inset-top);  // >= ios 11.2
}

.app_header_spacer {
height: calc(#{$ios_status_bar_height} + #{$header_height});
height: calc(#{$header_height} + constant(safe-area-inset-top));
height: calc(#{$header_height} + env(safe-area-inset-top));
background-color: white; // Otherwise, page background changes header color
// Of course, it will still header color when page is scrolled
}

.is_in_call {
.os_status_bar_spacer {
height: $ios_status_bar_height_incall;
}
.app_header_spacer {
height: calc(#{$ios_status_bar_height_incall} + #{$header_height});
height: calc(#{$header_height} + constant(safe-area-inset-top));
height: calc(#{$header_height} + env(safe-area-inset-top));
}
}

Thanks Jon. Framework7 already handles all this as you describe. It can't be fixed with CSS, because it's the WebView itself that gets shifted.

I only noticed this issue when I enabled the soft keyboard in the simulator. By default, it doesn't show the keyboard. You also need to be compiling with the iOS 12 SDK. No problem with the iOS 11 SDK.

Are you not experiencing the same issue? It seems to be a widespread issue for Cordova, React Native, etc...