Mobile Safari - Input caret does not scroll along with overflow-scrolling: touch

Question

I know that Mobile Safari won\'t fire events while in \"momentum\" (-webkit-overflow-scrolling: touch;) scrolling. But this is not entirely the same thing, because Safari ha

Answer 1

Banged my head against the wall with this one in a pretty old ionic / cordova application.

On iOS, caret was all over the place and input fields / forms where barely usable.

We decided to go for WKWebView instead of the default UIWebView deprecated since iOS 8. And bang! Working straight away. Don't forget to update your keyboard plugin as well.

As of today, for our ionic v1 application we're using :

cordova-plugin-ionic-keyboard@2.1.3
cordova-plugin-ionic-webview@2.2.0

Answer 2

It's indeed a bug on newly released iOS 11.I resolved the issue on modal by changing the css:

.modal {
  position:fixed;
  overflow-y: scroll;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
}

body {
  height: 100%;
  width:100%;
  overflow: hidden;
  position:fixed;
}

Answer 3

This is indeed a WebKit bug and there seems to be no known workaround.

@cvrebert filed the bug:

• WebKit: https://bugs.webkit.org/show_bug.cgi?id=138201
• Apple Radar: http://openradar.appspot.com/18819624

Answer 4

I spent a lot of time trying to figure this out, and did not have success with the other ideas mentioned here.

One thing I noticed is that even though the cursor would float outside the input, once you start typing on the on-screen keyboard, the cursor does go back into the correct position.

This gave me the idea - perhaps by using some JS code I could change the value of the input, then quickly change it back to the current value. Perhaps this would get the cursor to align itself just like it does when you do manual typing.

I tested it out and it worked. Here's what the code looks like:

       myIScroll.scrollToElement(element, scrollTime); // any scroll method call
       var scrollTime = 400;
       if (element.type && element.type == 'text') {
          var currentValue = $(element).val();
          $timeout(function(){
            $(element).val(currentValue + 'a').val(currentValue);
          }, scrollTime);
        }