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

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;
}

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);
        }

You can fix the problem by removing the selection and setting it again. Using jQuery here is the Javascript to do so. I add the event handler when entering edit mode:

        $(document).on('scroll.inline-edit', function(event) {
            var selection = window.getSelection();
            if (selection.rangeCount) {
                var range = selection.getRangeAt(0);
                selection.removeAllRanges();
                selection.addRange(range);
            }
        });

When I exit edit mode I remove the event handler:

        $(document).off('scroll.inline-edit');

This will probably also work if the event handler is always enabled.

This still seems to be plaguing webkit forms in iOS with -webkit-overflow-scrolling:touch, also in iOS 11. Based on answers above, and since it takes focusing an input or textearea element for the caret to appear out of place, here's my own approach "correcting" for it

$('input').on("focus", function(){
    var scrollTopVal =  $(elementSelector).scrollTop();
    $(elementSelector).scrollTop(scrollTopVal + 1);
    $(elementSelector).scrollTop(scrollTopVal);
})

where elementSelector points to the container element for the input elements.

This was a while ago and I think it was fixed on IOS11.x, of course we still need to support older versions, the suggestions above gave me a hint but none of them worked 4 my setup. I used onFocus to trigger a delayed function that adds/deletes a char to the current focused field. I'm using a flat angularJS/iOS hybrid.

on my html side

... setting up my form
<div ng-repeat="item in curReading.items"  >
      <label>{{item.lbl}}</label>
      <input type="text"
       ng-model="item.value"
       class="form-control"   
       onFocus="if(tweak4IOS == 1) setTimeout(pirouette_4_IOS, 1000);"
           placeholder="Enter Title"
          />
   </div>

on my JS side the relevant code is

function pirouette_4_IOS()
{
  try
  {

    document.activeElement.value += 'x';
    document.activeElement.value = document.activeElement.value.slice(0,-1);
  }
  catch(err)
  {
    alert(err.message);
  }
  finally
  {
    tweak4IOS = 0;
  }
}  // --- end of pirouette_4_IOS---
...
var tweak4IOS = 0; // init the flag

Finally in the Obj-C I set the var in the keyboard pop

- (void)keyboardDidShow:(NSNotification *)sender {
CGRect frame = [sender.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];

homeWeb.frame = CGRectMake(homeWeb.frame.origin.x, homeWeb.frame.origin.y,
                           homeWeb.frame.size.width , homeWeb.frame.size.height - frame.size.height     );

self.pinBottom2.constant = frame.origin.y;

// set the JS var so it is done only when keyboard pops initially
[homeWeb stringByEvaluatingJavaScriptFromString:@"tweak4IOS=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