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

input caret floating over a fixed layer when scrolling
ios safari text input cursor appears outside input box
ios overflow: scroll not working
webkit-overflow-scrolling: touch not working
ios safari webkit-overflow-scrolling
ios scroll to input
mobile safari focus input
mobile safari input focus keyboard

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 handles the (blinking) caret of an input internally.

<div id="container">
    <input type="text" />
    <div class="filling"></div>
</div>

#container {
    position: absolute;
    top: 20px;
    bottom: 20px;
    width: 50%;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    border: 1px solid black;
}

input {
    margin-top: 60vh;
}

.filling {
    height: 200vh;
}

Try this fiddle on your device (focus the input and then scroll): https://jsfiddle.net/gabrielmaldi/n5pgedzv

The issue also happens when you keep your finger pressed (i.e. not only when giving it momentum and releasing): the caret fails to scroll.

Obviously I don't want to turn off overflow scrolling, if there's no way to fix the caret so it will scroll correctly, it would be OK to hide it.

Thanks

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  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 handles the (blinking) caret of an input internally.

Had this same problem, my fix was altering between

-webkit-overflow-scrolling: touch

and

-webkit-overflow-scrolling: auto

whenever i focus/blur on inputs

Steps to recreate: Have an iPhone 6 running iOS 8.4 Insert the cursor into a text field. GitHub is home to over 50 million developers working together to host and div with overflow: scroll, and an input in the middle of it and have not html,body{ -webkit-overflow-scrolling : touch !important; overflow: auto  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 handles the (blinking) caret

Only one workaround that I was found - on scrolling event to check if input with type text is focused, set focus on some other element (for example, on button). As result, virtual keyboard and cursor will disappear. This solution is not perfect, but it doesn't look so horrible as with cursors on top of the form. Example:

$(".scrollContainer").scroll(function () {
  var selected = $("input[type='text']:focus");
  if (selected.length > 0) {
      $('#someButton').focus();
  }
}

Summary: -webkit-overflow-scrolling: touch does not "obey" z-index. GitHub is home to over 50 million developers working together to host and seem locked in iOS Safari, and the body would retain the scroll touch events. Mobile Safari-Input caret does not scroll along with overflow-scrolling: touch (7) 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.

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

Mobile Safari - Input caret does not scroll along with overflow-scrolling: touch. Dismiss All your code in one place. 2) Prevent body scrolling at all time when the​  Mobile Safari-Input caret does not scroll along with overflow-scrolling: touch (7) 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 handles the (blinking) caret of an input internally.

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

Here the headache comes, the scroll does not work on Safari. Only Safari! overflow-y: scroll; -webkit-overflow-scrolling: touch;. It doesn't work  Mobile Safari – Input caret does not scroll along with overflow-scrolling: touch February 24, 2018 Ios Leave a comment Questions: I know that Mobile Safari won’t fire events while in “momentum” (-webkit-overflow-scrolling: touch;) scrolling.

you can see this by opening the link of you own app in iPhone. when you scroll blue cursor move out of the input field. Yes, it is iOS bug No,its not iOS bug. open Facebook,Google or any other website on this bug is not due to overflow:​auto it happened due to -webkit-overflow-scrolling:touch . if i  How is this issue not resolved yet? Seriously. As carlos already issued at 2016-03-11 (WTF): - still happening in iOS 9.3 - Only happens when the scroll is not in the body. Usually to have a fixed layer like a header. - Only happens when -webkit-overflow-scrolling: touch is activated (for able to scroll with momentum)

This is not an issue with Pega but with iOS safari webkit 7 and 8. if the CSS property webkit-overflow-scrolling:touch, the native elastic scroll will  Both this panel and the main page use -webkit-overflow-scrolling:touch. My problem was that when showing the menu the scrolling would not work and instead the main page behind it would scroll. To fix this, I simply removed the -webkit-overflow-scrolling:touch from the menu when hidden and add it back when shown.

Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for We publicly list browser bugs that are impacting us here, in the hopes of cursor to not be displayed when toggling a readonly <input> to read-write. Safari (iOS) Modal with -webkit-overflow-scrolling: touch doesn't become scrollable after  Related links to 'input fields do not focus' issue: webkit-overflow-scrolling forms broken on iOS 7 full-screen web app, Issue with iOS 7 Mobile Safari Scroll Events on Keyboard Up and Down, ios7 issues with webview focus when using keyboard html, How do I focus an HTML text field on an iPhone (causing the keyboard to come up)?, Mobile Safari

Comments
  • See also github.com/twbs/bootstrap/issues/14708
  • Sorry, have to downvote because workarounds are available for some. Unfortunately not a simple and across the board and easy and quick fix I agree but it works for some of us (position fixed, etc.)
  • This is the only one works for me... Thanks! It fixes the caret's out of bounds on ios.
  • This fix is pretty hardcore and should be used with caution. For me it was causing UIWebView crashes in Cordova application. Might be fine for website use.
  • Seems the best solution for me
  • I can confirm that this approach worked, but it looks like it doesn't work any longer on ios 13. Apple has the following statement in their release notes: "Added support for one-finger accelerated scrolling to all frames and overflow:scroll elements eliminating the need to set -webkit-overflow-scrolling: touch."
  • Nice, thank you. Worked better for me by just doing $("input[type='text']:focus").blur();. Also wrapped in a quick mobile-safari only condition.
  • Igor and @Ronny your solution make the scroll behavior weirdly..It does not scroll smoothly.
  • This is the only solution in my case.
  • genius! Remember, that most scroll methods have a callback for when they complete, so the timeout call is not needed in most cases.
  • You changed it from what? What was the part that fixed it?
  • Never mind it's position: fixed on the body that does it.
  • Regrettably, WKWebView is not a definite solution either (at least as of iOS 12 developer beta 9). See bugs.webkit.org/show_bug.cgi?id=138201#c34 and the linked YouTube video
  • agreed. There is no simple fix working for everybody. Trade-offs are to be made. I posted here the trade off I made for my own context. Other solutions here worked but not as good as this one : a close to no code change drop-in replacement for the deprecated UIWebView.