Keyboard Dismissal Leaves Viewport Shifted in iOS 12 / XCode 10 about cordova-ios HOT 132 CLOSED

A fix for this was just merged into WebKit (WebKit/WebKit@ec5ad1b) and should be available in the future version of iOS.

Now that I understand the problem, I'm going to see if I can put together a Cordova plugin to replicate the fix on earlier versions.

from cordova-ios.

Hi all, i am facing that issue run on IOS 12 that was built with Xcode 10 (if you build with XCode 9, the issue don't appear). IOS 12 will automatic change content offset of WKScrollview in WKWebview fit with height of keyboard in case keyboardWillShow, but it didn't revert it in case keyboardWillHide. That is my solution to fixed it, hope it help for you.

/**
 * observer notification when keyboard will hide
 */
[[NSNotificationCenter defaultCenter] addObserver:self
                                                 selector:@selector(keyboardWillHide)
                                                     name:UIKeyboardWillHideNotification
                                                   object:nil];

/////////////--------------------------//////////////
/*
 *Description: this method was trigger by selector keyboarwillhide from notification
 */
-(void)keyboardWillHide
{
    if (@available(iOS 12.0, *)) {
        WKWebView *webview = (WKWebView*)self.webView;
         for(UIView* v in webview.subviews){
              if([v isKindOfClass:NSClassFromString(@"WKScrollView")]){
                      UIScrollView *scrollView = (UIScrollView*)v;
                      [scrollView setContentOffset:CGPointMake(0, 0)];
              }
          }
     }
}

from cordova-ios.

Okay, I've managed to reproduce it. The bad news is that it's not a Cordova bug, because I reproduced it in a demo Swift app with a standard WKWebView.

I'll try to wrap this demo up as a reduced test case and submit it to Apple 😞

from cordova-ios.

Radar filed as rdar://44655885
Mirrored at https://openradar.appspot.com/radar?id=5018321736957952
WebKit bug report at https://webkit.org/b/192564

Please file duplicate radar reports at http://bugreporter.apple.com!

from cordova-ios.

This was killing me. We seemed to find an ugly fix that works without taking viewport-fit:cover off.
$('input').on("blur",function (e) {
window.scrollTo(0,0);
});

from cordova-ios.

As @andrewballester suggested it, the ugly fix he found went through my mind (and it hurts..)
But when you have a form with multiple fields and using ios keyboard arrows to navigate between them, the screen jumps to the top and if your field was way below the "fold", it is then hidden behind the keyboard

Another ugly fix to fix the first ugly fix is to use another method :

/**
 * iOS 12 bug for keyboard dismissing, view not restored ಠ_ಠ
 */
if (device.ios && device.osVersion.split('.')[0] >= 12) {
    jQuery(document).delegate('input, textarea', 'blur', function(){
        setTimeout(function(){ 
	    // did not work for me straight away without a small timeout ಠ_ಠ
	    jQuery('html').animate({height: '100.1vh'}, 100, function(){ 
	        // did not work for me with just one instruction with 100vh  ಠ_ಠ
	        // the easing smooth doesn't work all the time properly ಠ_ಠ
		jQuery(this).animate({height: '100vh'}, 1);
	    });
        },100);
    });
}

from cordova-ios.

As a workaround until that fix is released in a future iOS version, I've done my best to backport it to a plugin:
📦 cordova-plugin-wkkeyboardfix: npm / repo

The code is very hacky and is not guaranteed to be safe to submit to the app store. Use at your own risk.

from cordova-ios.

For me the solution was changing the keyboard plugin I was using, from ionic-plugin-keyboard (https://github.com/ionic-team/ionic-plugin-keyboard , which was actually deprecated) to cordova-plugin-ionic-keyboard (https://github.com/ionic-team/cordova-plugin-ionic-keyboard). It now works fine.

from cordova-ios.

A simple solution I've come up with is to call window.scrollBy(0,0) onBlur of the field in question.
This forces a repaint of the window and solves the problem.

I guess it could be implemented as a plugin, but that's above my current abilities unfortunately. :)

In our case we just updated our React component and that solved it everywhere in our applications.

from cordova-ios.

Thanks @KhanhPhamDinh ! I've validated that this is working for me in a fork of the cordova-ionic-webview project, and have submitted a PR crediting you: ionic-team/cordova-plugin-ionic-webview#201

from cordova-ios.

We found building with Xcode 9 as opposed to 10 reverted any weird keyboard issues (obviously not long term solution)

from cordova-ios.

That openradar is the closest thing you'll be able to watch. Apple's internal radar system doesn't allow you to see or subscribe to any bugs aside from your own. I submitted that bug and have not heard any response from Apple.

We might be able to hack around it at the plugin level, but the proper fix has to be made by Apple in WKWebView.

from cordova-ios.

Another way:
in HTML:

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>

Somewhere 'deviceready'/'DOMContentLoaded' in JS (depends on cordova-plugin-keyboard):

(function ios12NotchFix(is_ios, keyboard_plugin_exists){
    if(!is_ios || device.model.indexOf("iPhone")===-1) return false;
    if(!keyboard_plugin_exists) throw new Error("This fix depends on 'cordova-plugin-keyboard'!");
    const iphone_number= Number(device.model.replace("iPhone", "").replace(",","."));
    const /* viewport metatag */
        viewport_el= document.getElementsByName("viewport")[0],
        default_content= "user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1";
    if(iphone_number>=10.6||iphone_number===10.3){ /* devices with notch: X, XR, ... */
        setCover();
        window.addEventListener('keyboardWillShow', setFix);
        window.addEventListener('keyboardWillHide', setCover);
    }
    function setCover(){ viewport_el.content= default_content+", viewport-fit=cover"; }
    function setFix(){ viewport_el.content= default_content; }
})(device.platform==="iOS", typeof Keyboard !== "undefined");

from cordova-ios.

I'm seeing a potentially similar issue with UIWebView on iOS 12: if you are scrolled to the bottom of the page with an input field at the bottom and tap in it to open the keyboard, it covers the bottom of the page and does not scroll up like it used to on iOS 11 (and prior). As a result, the input field is completely covered by the keyboard and you can't see what you're typing. I don't know if this is related to the same root WebKit bug, but happy to open another issue if this should be treated separately.

from cordova-ios.

Attached is a patch which implements the workaround based on the idea of @idoodler in the cordova-plugin-wkwebview-engine plugin.
The patch must be applied against cordova-plugin-wkwebview-engine/src/ios/CDVWKWebViewEngine.m.

CDVWKWebViewEngine.m.zip

HTH,
Bálint

from cordova-ios.

This is not fixed in iOS 13, developer beta 1.

from cordova-ios.

i have the same problem... xcode 10.1... and all devices... help-me jesus!!!!

from cordova-ios.

Experience same without Cordova, using pure WKWebView.
From native code side the following workaround worked: webView.setNeedsLayout() on keyboard dismissal.
UI is re-rendered correctly but instantly, not smoothly like in Safari.

from cordova-ios.

FYI merged the PR for this in cordova-plugin-ionic-webview: ionic-team/cordova-plugin-ionic-webview#201. Out in 2.2.4 shortly

from cordova-ios.

Based on some JS comments above, this one is working for me:

document.addEventListener('focusout', function (event) {
      const targetNode = event.target
      
      if (targetNode) {
        const tagName = targetNode.tagName.toLowerCase()
        
        if (targetNode.type != 'submit' && (tagName == 'input' || tagName == 'textarea')) {
          htmlNode.style.height = '100.1vh'
          
          setTimeout(function () {
            htmlNode.style.height = '100vh'
          }, 50)
        }
      }
    })

from cordova-ios.

[FIXED]
To solve the issue

1. Install ionic native keyboard

npm install @ionic-native/keyboard

2. Import the same in app.module.ts

3. On the page where keyboard is producing the problem

this.keyboard.onKeyboardHide().subcribe(()=>{ window.scrollTo(0,0); })

PS: I tried nearly all the solutions on this page but only this one worked for me.

Working on iOS 12 & xcode 10.

from cordova-ios.

My solution was use a plugin or any thing to detect the event on keyboard native hide, and on this moment execute script to normalize the height of the app.

https://github.com/cjpearson/cordova-plugin-keyboard

//install the plugin
cordova plugin add cordova-plugin-keyboard

//on the .js file detect the event and apply the normal height in the event the keyboard will hide.
window.addEventListener('keyboardWillHide', function () {
  document.getElementsByTagName('html')[0].style.height = '101vh';
  setTimeout(()=>{
    document.getElementsByTagName('html')[0].style.height = '100vh';
  }, 40);
});

for the time being

from cordova-ios.

@kozmanbalint Yes, you are the man! I forked cordova-plugin-wkwebview-engine, applied the diff, pointed the plugin to my repo, everything works. Thank you!

from cordova-ios.

@dpogue - I AM seeing this when replacing cordova-plugin-ionic-webview with the cordova-plugin-wkwebview-engine WKWebView implementation, but I AM NOT seeing this without WKWebView (UIWebView)

from cordova-ios.

@Stefano1964 - I have a branch with your suggested changes and am NOT seeing any change regarding keyboard displacement. Are you sure we're talking about the same issue? Are you using viewport-fit=cover"?

from cordova-ios.

Me too, I came to the same conclusion as only downgrading to Xcode 9 helped to remedy the problem.

Does anyone know what is the status of the issue on Apple's side? Is it acknowledged as Xcode bug? Is there a bug report I can subscribe to? I only found this, but it's unofficial and cannot subscribe to notifications: http://www.openradar.me/44655885

Or will it rather be a fix in cordova-plugin-ionic-webview? I tried applying this fix, but it didn't help: ionic-team/cordova-plugin-ionic-webview#201

from cordova-ios.

This is a bug in WebKit, and has been reported to Apple with a reduced test case project:

Radar filed as rdar://44655885
Mirrored at https://openradar.appspot.com/radar?id=5018321736957952

If you want to raise the priority, file duplicate reports at https://bugreporter.apple.com (no seriously, Apple prioritizes based on how many duplicate reports they get)

from cordova-ios.

@Yuripetusko yes

from cordova-ios.

For anyone using cordova inappbrowser, here is a slightly modified fix of mlynch's post above that works nicely for inappbrowser:

Make the following changes to file: CDVWKInAppBrowser.m

1. Add this directly before the pluginInitialize function:

NSTimer *timer;

2. Add this to the bottom of the pluginInitialize function:

 [[NSNotificationCenter defaultCenter]
 addObserver:self
 selector:@selector(keyboardWillHide)
 name:UIKeyboardWillHideNotification object:nil];

[[NSNotificationCenter defaultCenter]
 addObserver:self
 selector:@selector(keyboardWillShow)
 name:UIKeyboardWillShowNotification object:nil];   

3. Add these directly below the pluginInitialize function:

 -(void)keyboardWillHide
{       
    if (@available(iOS 12.0, *)) {
        timer = [NSTimer scheduledTimerWithTimeInterval:0 target:self selector:@selector(keyboardDisplacementFix) userInfo:nil repeats:false];
        [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
    }
}

 -(void)keyboardWillShow
{    
    if (timer != nil) {
        [timer invalidate];
    }
}

 -(void)keyboardDisplacementFix
{    
    if ([self.inAppBrowserViewController.webView respondsToSelector:@selector(scrollView)]) { 
        [UIView animateWithDuration:.25 animations:^{
            ((UIScrollView*)[self.inAppBrowserViewController.webView scrollView]).contentOffset = CGPointMake(0, 0);
        }];        
    } 
 }

from cordova-ios.

@mlynch I believe everyone has either found a work-around or is waiting for an actual fix from Apple. I believe your fix resolved the issue for those using cordova-plugin-ionic-webview. I made some slight modifications to your fix to use it in the latest cordova-plugin-inappbrowser code as I could not find another working solution for this scenario. Your fix also appears to be working well there.

from cordova-ios.

I found another fix if you are using the cordova-plugin-keyboard. It is based on the scroll(0,0) technique. Basically, if the keyboard is dismissed and remains dismissed for 50ms, the workaround is applied.

Thanks. I'm simply doing:

window.addEventListener('keyboardDidHide', function() {
    if (window.pageYOffset != 0) {
      window.scrollTo(0, 0);
    }
});

, which is a simple fix and works just fine.
I understand the 50ms may help in case of spurious keyboard events. Did you notice them?
Why did you add the 50ms logic?

from cordova-ios.

I made the fix as suggested in https://github.com/ionic-team/cordova-plugin-ionic-webview/pull/201/files in my cordova project in Xcode and that seemed to work for me - I wasnt using any other cordova plugin

from cordova-ios.

Spent two days on this, fixed thanks to @cvanem's adapted fix to the inappbrowser plugin code.

I was also able to fix the issue with scrollTo, albeit with an unacceptable delay in the content being resized, via the IAB JavaScript API:
IAB.executeScript({ code: 'window.scrollTo(0, 0);' })

I spent much more time on this than I'd have liked because I didn't realise we were using inappbrowser, and was instead running code on the regular WebView window - this tidbit may be of help to others debugging the problem.

from cordova-ios.

@tobeee I made these changes:

1. Add the [email protected] to the project.
2. Add the JS code from @jaandrle to the startup of the application. If you create a new Cordova 8.1.2 application it generates an index.js automatically. The code from @jaandrle needs to be called when the deviceready event is fired.
3. In my case I already had viewport-fit=cover applied globally on the viewport which I removed so that it's only applied dynamically to the iPhones with the notch.

from cordova-ios.

This was killing me. We seemed to find an ugly fix that works without taking viewport-fit:cover off.
$('input').on("blur",function (e) {
window.scrollTo(0,0);
});

thank you!! this works like a charm!

from cordova-ios.

from cordova-ios.

Hi all, i am facing that issue run on IOS 12 that was built with Xcode 10 (if you build with XCode 9, the issue don't appear). IOS 12 will automatic change content offset of WKScrollview in WKWebview fit with height of keyboard in case keyboardWillShow, but it didn't revert it in case keyboardWillHide. That is my solution to fixed it, hope it help for you.

/**
 * observer notification when keyboard will hide
 */
[[NSNotificationCenter defaultCenter] addObserver:self
                                                 selector:@selector(keyboardWillHide)
                                                     name:UIKeyboardWillHideNotification
                                                   object:nil];

/////////////--------------------------//////////////
/*
 *Description: this method was trigger by selector keyboarwillhide from notification
 */
-(void)keyboardWillHide
{
    if (@available(iOS 12.0, *)) {
        WKWebView *webview = (WKWebView*)self.webView;
         for(UIView* v in webview.subviews){
              if([v isKindOfClass:NSClassFromString(@"WKScrollView")]){
                      UIScrollView *scrollView = (UIScrollView*)v;
                      [scrollView setContentOffset:CGPointMake(0, 0)];
              }
          }
     }
}

This solution maybe works，but WKScrollView is private class, it's not allowed used by apple's app review rules!

from cordova-ios.

@coolvasanth have you tried #417 (comment)?

I've forked the repo and applied the patch, if it is easier for some to try if it helps:
https://github.com/kozmanbalint/cordova-plugin-wkwebview-engine

from cordova-ios.

$('input').on("blur",function (e) {
window.scrollTo(0,0);
});

For those who only wants to find a way to handle the problem from javascript perspective, I found that instead of window.scrollTo(0,0);, window.scrollTo(0, document.documentElement.clientHeight); works for me.

from cordova-ios.

Although it's not relevant for me now, I would say thank you for your effort @dpogue

from cordova-ios.

Does this happen in a plain Cordova app without the Ionic WebView plugin? Does it happen if you use the Apache version of the WKWebView plugin (cordova-plugin-wkwebview-engine)?

from cordova-ios.

Are you using viewport-fit=cover in your meta viewport tag?

I'm trying to reproduce this in an iOS 12 simulator with Xcode 10 and plain WKWebView, and I don't see it doing anything different than iOS 11, but that might also be because my page scrolls.

from cordova-ios.

We are for iPhoneX / notch support:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi, viewport-fit=cover" />

I'm not seeing the issue when removing the viewport-fit=cover but this breaks notch workarounds of course.

from cordova-ios.

Was afraid of that. Thanks for confirmation / isolation @dpogue . If you link the issue here, I'll be sure to try and weigh in on its importance, etc.

from cordova-ios.

In one af my app i had to use the ionic wkwebview (i dont use ionic framework) as this version allow to access files outside the app directory and the standard cordova wkwebview doesn't allow this kind of access.
I can see this bug ONLY with ionic wkwebview latest (Xcode 10, iOS 12 real device) and only on smartphone, on iPad it's ok (webview back to original position), on the same app switching to default cordova wkwebview the bug is not there.
Tested also with xs in simulator, same, with cordova wkwebview it's ok, not with ionic wkwebview.
@dpogue you provide a swift project (tested and the bug is present), but wkwebview implementation both in cordova and ionic is an obj-c implemenation, maybe a swift bug?

from cordova-ios.

Hello! In my case i updated cordova-plugin-ionic-webview up to ="^2.1.4"
and ionic platform to latest version. For now i have

Ionic:

ionic (Ionic CLI) : 4.1.2 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.11

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.4, (and 12 other plugins)

System:

ios-sim : 5.0.13
NodeJS : v8.11.3 (/usr/local/bin/node)
npm : 6.1.0
OS : macOS High Sierra
Xcode : Xcode 10.0 Build version 10A255
but it still not enough, you should add to config.xml file:




if you have issues with CORS after this modification please let me know and i will advice you how to avoid it

from cordova-ios.

@Bravo2x you have to edit CDVWKWebViewEngine.m:
ionic-team/cordova-plugin-ionic-webview#176

from cordova-ios.

Yes, i'm sure, and yes i'm using viewport-fit=cover", for me this solved the issue.

from cordova-ios.

For the record, I strongly suspect the issue was introduced as a side effect in WebKit/WebKit@0ff63c4

from cordova-ios.

Thanks for doing some digging @dpogue . I've written the author at Apple, so hopefully there is some visibility internally there, now. 🤞

from cordova-ios.

Yes please, if it is not about what is described in the original issue here, open a new one (but if you think it is related, you can of course include a link to this issue in the new one).

from cordova-ios.

Use the following code in device ready. This works for me.

$('input').on("blur",function (e) {
    window.scrollTo(0,0);
});

$('input').on("focus",function (e) {
     var inputpos = $(this).offset().top - 200;        
     window.scrollTo(0, inputpos);
});

from cordova-ios.

After a few customers reporting such behaviour on Wechat browser, I believe it uses one of the Webkits you guys have probably mentioned. The problem occurred. This only happens on iOS 12. I don't think Wechat is using ionic at all so this should be a bug with the webkit. However, using Chrome doesn't have the same bug.

from cordova-ios.

Just filed a duplicate report

from cordova-ios.

I do confirm that solution/workaround by @thepianist2 presented here #417 (comment) using keyboard plugin works. Xcode 10, iOS12

from cordova-ios.

This works for me to fix window.scrollTo(0, 0) issue.
Add this code in device ready:

var inputYoffset = 0;
jQuery(document).delegate('input:not([type=submit]), textarea', 'focus', function(){
	inputYoffset = window.pageYOffset;
});
jQuery(document).delegate('input:not([type=submit]), textarea', 'blur', function(){
	document.getElementsByTagName('html')[0].style.height = '101vh';
	setTimeout(function() {
		document.getElementsByTagName('html')[0].style.height = '100vh';
		window.scrollTo(0, 0);
		window.scrollTo(0, inputYoffset);
	}, 50);
});

from cordova-ios.

Is this the same issue?

apache/cordova-plugin-wkwebview-engine#71

from cordova-ios.

Upgrading to cordova-plugin-ionic-webview fixed this issue for me but now I can't scroll on iOS.

from cordova-ios.

Downgrading to xcode9 and building with it for now helped

from cordova-ios.

In an attempt to bump up the priority on this, I've also filed https://bugs.webkit.org/show_bug.cgi?id=192564

from cordova-ios.

That is my solution to fixed it, hope it help for you.

The fix from @KhanhPhamDinh works as expected, thanks a lot!

from cordova-ios.

 if #available(iOS 11.0, *) {
             self.webView.scrollView.contentInsetAdjustmentBehavior = .never
 } else {
            self.automaticallyAdjustsScrollViewInsets = false
 }

And UIScrollViewDelegate

 func scrollViewDidChangeAdjustedContentInset(_ scrollView: UIScrollView) {
       Logger.print("scrollViewDidChangeAdjustedContentInset")
         if #available(iOS 12.0, *) {
           for view in webView.subviews {
                if let scrollView = view as? UIScrollView {
                   scrollView.setContentOffset(.zero, animated: true)
                 }
             }
        }
}

Worked

from cordova-ios.

How to fix this issue if i am forced to use only phonegap build? Setting html height is not fix for me, because i am using absolute/fixed positioned divs which are ignoring my HTML height...

from cordova-ios.

I filed a duplicate report with Apple. Hopefully we can get this resolved sooner than later.

Does anyone happen to have a workaround for this issue when using cordova-plugin-inappbrowser? I could not get any of the above solutions to work and can't downgrade to xCode 9 as all my devices are running iOS 12.

from cordova-ios.

Waiting for the solution

 if #available(iOS 11.0, *) {
             self.webView.scrollView.contentInsetAdjustmentBehavior = .never
 } else {
            self.automaticallyAdjustsScrollViewInsets = false
 }

And UIScrollViewDelegate

 func scrollViewDidChangeAdjustedContentInset(_ scrollView: UIScrollView) {
       Logger.print("scrollViewDidChangeAdjustedContentInset")
         if #available(iOS 12.0, *) {
           for view in webView.subviews {
                if let scrollView = view as? UIScrollView {
                   scrollView.setContentOffset(.zero, animated: true)
                 }
             }
        }
}

Worked
Which file should i add the code?

from cordova-ios.

still facing issue... any update on this?

from cordova-ios.

Nope. There has been no response from Apple to any of the bug reports so far.

There is no correct way for Cordova (or Ionic) to solve this in our code. We can try to hack around it, but the real problem must be fixed by Apple.

from cordova-ios.

Having trouble following this issue. For anyone that used our webview (cordova-plugin-ionic-webview), is the issue resolved? We're happy to add other hacks to work around this in the meantime just not sure where things are at...

from cordova-ios.

FYI, I got an email today, from Apple, indicating that they closed my bug report because it was a duplicate of 44655885.

from cordova-ios.

Confirmed my bug report has been closed due to the same reason. Hopefully apple is now looking into this.

from cordova-ios.

I found another fix if you are using the cordova-plugin-keyboard. It is based on the scroll(0,0) technique. Basically, if the keyboard is dismissed and remains dismissed for 50ms, the workaround is applied.

    // Create boolean variable in document or other state variable, initialize to false
    state.keyboardNeedsWorkaround = false;
    
    // ... Place code below inside the deviceready handler ... 
    
    // Apply Workaround for iOS 12 keyboard dismissal bug
    window.addEventListener('keyboardDidShow', function () {
        // Describe your logic which will be run each time keyboard is shown.
        state.keyboardNeedsWorkaround = false;
    });
    window.addEventListener('keyboardDidHide', function () {
        // Describe your logic which will be run each time keyboard is closed.
        state.keyboardNeedsWorkaround = true;
        setTimeout(function () {
            if(state.keyboardNeedsWorkaround){
                window.scroll(0,0);
            }
        }, 50)
    });

from cordova-ios.

@idangozlan your solution doesn't work for form navigation (using the keyboard arrows), because each time you target a new input field, the keyboard hides and shows again, causing a scroll, which stops the focus event. i'm currently testing @farrisbar's solution to see if this 50ms wait will fix this.

from cordova-ios.

update: @farrisbar is better, but when it does window.scroll(0,0); after 50ms, touch input freezes and it wont let you scroll for a couple of seconds.....i cant find a successful fix to this issue :(

from cordova-ios.

@alsocalledchris
Yes I can confirm that work on iPhone X and above. But unfortunately an empty space appear on bottom with iPhone 8 and below after the keyboard hides...

from cordova-ios.

For anyone using React Native, my fix for this involves detecting the keyboard on show and hide, and triggers contentInset to reset the view to default.

Add the following to your code:

import { Keyboard } from 'react-native'

  state = {
      keyboardState: 'closed'
  }

  componentWillMount() {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', this._keyboardWillHide);
  }

  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardWillHideListener.remove();
  }

  _keyboardDidShow = () => {
    this.setState({
        keyboardState: 'opened'
    });
  }

  _keyboardWillHide = () => {
    this.setState({
        keyboardState: 'closed'
    });
  }

and then put this line inside your WebView or WKWebView:

contentInset={this.state.keyboardState === 'opened' ? {bottom: 0.01} : {bottom: 0}}

keyboardState will change on open and on detecting a close.
When it does so, the contentInset switches between 0.01 and 0, which is visually unnoticeable.
This simulates a person touching the screen, which forces a reset to default position.

from cordova-ios.

The fix from @jaandrle worked for me. In addition to issues with closing the keyboard I was having issues with the keyboard covering fields with no way to see them below the keyboard. The key was removing the globally set viewport-fit=cover and only applying it at runtime. This fixed the scroll issue on iPad's running iOS 12.x.

from cordova-ios.

from cordova-ios.

I am seeing similar behavior for select-option selector dismissal. That too, leaves viewport shifted. What are the chances that both are related to the same issue? Should I be creating a new issue?

from cordova-ios.

The fix from @jaandrle worked for me too. Thanks!

from cordova-ios.

I am also facing similar issue.

I am developing a Hybrid Application using Cordova with MFP.

Recently we upgraded the Xcode version from 9.4.1 to 10.1 after that facing an issue is when key in on input tag then the keyboard is appearing from the bottom and suddenly disappeared but this is working normal below IOS 12 version even build app using Xcode 10.1.

I am using native keyboard instead of Cordova plugin keyboard.

After removing the viewport-fit=cover as mentioned in https://github.com/apache/cordova-ios/issues/417#issuecomment-423326624 the keyboard is appearing from the bottom as normal but the keyboard is overlaid on the input tag so could not see what we are typing in the input.

And also tried with https://github.com/apache/cordova-ios/issues/417#issuecomment-428705830 but not working.

We expecting the result is while key in on input the keyboard should appear from the bottom and need to be disappear once key in finished.

Anybody kindly help on this.

from cordova-ios.

Hi all, i am facing that issue run on IOS 12 that was built with Xcode 10 (if you build with XCode 9, the issue don't appear). IOS 12 will automatic change content offset of WKScrollview in WKWebview fit with height of keyboard in case keyboardWillShow, but it didn't revert it in case keyboardWillHide. That is my solution to fixed it, hope it help for you.

/**
 * observer notification when keyboard will hide
 */
[[NSNotificationCenter defaultCenter] addObserver:self
                                                 selector:@selector(keyboardWillHide)
                                                     name:UIKeyboardWillHideNotification
                                                   object:nil];

/////////////--------------------------//////////////
/*
 *Description: this method was trigger by selector keyboarwillhide from notification
 */
-(void)keyboardWillHide
{
    if (@available(iOS 12.0, *)) {
        WKWebView *webview = (WKWebView*)self.webView;
         for(UIView* v in webview.subviews){
              if([v isKindOfClass:NSClassFromString(@"WKScrollView")]){
                      UIScrollView *scrollView = (UIScrollView*)v;
                      [scrollView setContentOffset:CGPointMake(0, 0)];
              }
          }
     }
}

Here is the Swift implementation for anyone wo needs it.

/**
 * observer notification when keyboard will hide
 */
NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillHide), name:UIResponder.keyboardWillHideNotification, object: nil)

/*
 *Description: this method was trigger by selector keyboarwillhide from notification
 */
@objc func keyboardWillHide() {
        if #available(iOS 12, *) {
            webView.subviews.forEach { (subview) in
                if let scrollView = subview as? UIScrollView {
                    scrollView.setContentOffset(CGPoint(x: 0, y: 0), animated: true)
                }
            }
        }
    }

from cordova-ios.

We're experiencing the same issue and added a workaround similar to what @shuppert mentioned in the comment above. For now we dynamically add the viewport-fit=cover for those phones that need it. That solved most of the issues for us.

from cordova-ios.

@tobeee I placed the code in an extension of MainViewController I attached the file below.

import Foundation
import WebKit

extension MainViewController {
    
    override open func viewDidLoad() {
        super.viewDidLoad()
        /**
         * observer notification when keyboard will hide
         */
        NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillHide), name:UIResponder.keyboardWillHideNotification, object: nil)
    }

    
    // There is a bug in WebKit that won't reset the contentOffset after the keyboard has been hidden. This would
    // result in a black (former white) space where the keyboard was located. By manually moving down the content of the
    // scrollView we work around that issue and everything works as usual
    @objc fileprivate func keyboardWillHide() {
        if #available(iOS 12, *) {
            webView.subviews.forEach { (subview) in
                if let scrollView = subview as? UIScrollView {
                    scrollView.setContentOffset(CGPoint(x: 0, y: 0), animated: true)
                }
            }
        }
    }
}

from cordova-ios.

from cordova-ios.

@tobeee I implemented it in a our existing extension of MainViewController, which is an extra .swift file.

from cordova-ios.

from cordova-ios.

@idoodler I'd like to check this into version control, can you extend MainViewController from a Cordova plugin? Apologies for the simple question, I know nothing about developing Crodova plugins or writing native code.

from cordova-ios.

@manuarya can @ionic-native/keyboard be used in a phonegap app?

from cordova-ios.

@manuarya which exact version of @ionic-native/keyboard do you use in your workaround?

I was able to solve the issue with your workaround only using @ionic-native/[email protected], the latest version 5.5.1 of that plugin breaks the things completely.

from cordova-ios.

Hi all, i am facing that issue run on IOS 12 that was built with Xcode 10 (if you build with XCode 9, the issue don't appear). IOS 12 will automatic change content offset of WKScrollview in WKWebview fit with height of keyboard in case keyboardWillShow, but it didn't revert it in case keyboardWillHide. That is my solution to fixed it, hope it help for you.

/**
 * observer notification when keyboard will hide
 */
[[NSNotificationCenter defaultCenter] addObserver:self
                                                 selector:@selector(keyboardWillHide)
                                                     name:UIKeyboardWillHideNotification
                                                   object:nil];

/////////////--------------------------//////////////
/*
 *Description: this method was trigger by selector keyboarwillhide from notification
 */
-(void)keyboardWillHide
{
    if (@available(iOS 12.0, *)) {
        WKWebView *webview = (WKWebView*)self.webView;
         for(UIView* v in webview.subviews){
              if([v isKindOfClass:NSClassFromString(@"WKScrollView")]){
                      UIScrollView *scrollView = (UIScrollView*)v;
                      [scrollView setContentOffset:CGPointMake(0, 0)];
              }
          }
     }
}

Update Swift script:

override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        NotificationCenter.default.addObserver(self, selector: #selector(self.keyboardWillHide), name: UIResponder.keyboardWillHideNotification, object: nil)
    }
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        NotificationCenter.default.removeObserver(self, name: UIResponder.keyboardWillHideNotification, object: nil)
    }
    @objc func keyboardWillHide(notification: NSNotification){
        if #available(iOS 12.0, *) {
            for v in self.webView.subviews {
                if(String(describing: type(of: v)) == "WKScrollView"){
                    let sv = v as! UIScrollView
                    sv.setContentOffset(CGPoint.init(x: 0, y: 0), animated: false)
                }
            }
        }
    }

from cordova-ios.

@manuarya which exact version of @ionic-native/keyboard do you use in your workaround?

I was able to solve the issue with your workaround only using @ionic-native/[email protected], the latest version 5.5.1 of that plugin breaks the things completely.

I am Using version "4.20.0"

from cordova-ios.

I'm using Ionic 3 and Cordova 8.0.0. I'm facing the same problem, tried almost all the suggestions. Nothing seems to work for me!! can anybody suggest me, what solution exactly worked for them ?

from cordova-ios.

@coolvasanth have you tried #417 (comment)?

from cordova-ios.

This solution maybe works，but WKScrollView is private class, it's not allowed used by apple's app review rules!

@huangturen What do you mean by NOT allowed to be used by Apple's App Review? Where is that mentioned in the App Store Review Guidelines? Can you provide us with a link.

I'm about to fork the plugin and do as @kozmanbalint suggested, then will submit to the App Store. We should find another workaround if it's not allowed by Apple.

Thanks

from cordova-ios.

😭

from cordova-ios.

Downgrading to [email protected] and [email protected] worked for my Ionic 4 app. Not even close to ideal, but more ideal than having the screen jump all over the place whenever the user uses my messaging input.

from cordova-ios.

Has anyone implemented the patch and had a build rejected from the App store? I have not (knock on 🌲)

from cordova-ios.

If you want a solution without jQuery that handles all inputs that are not even displayed yet, try this:

    let isFormFieldActive = false;

    window.addEventListener('focusin', function focusInHack() {
      const elementName = document.activeElement.localName;
      if (['select', 'textarea', 'input'].includes(elementName)) {
        isFormFieldActive = true;
      }
    });

    window.addEventListener('focusout', function focusOutHack() {
      if (isFormFieldActive) {
        setTimeout(() => {
          window.scrollTo(0, document.documentElement.clientHeight);
        });
        isFormFieldActive = false;
      }
    });

from cordova-ios.

I make a patch for it.https://github.com/MichaelIT/patch-ios12-webview-keyboard

npm add patch-ios12-webview-keyboard --save
import 'patch-ios12-webview-keyboard'

from cordova-ios.

@lhmarcilli Please try the plugin: https://www.npmjs.com/package/cordova-plugin-wkkeyboardfix

from cordova-ios.