'iOS Safari/Chrome - Unwanted scrolling when focusing an input inside the modal

Tested in Safari and Chrome - the same result, so I think it's iOS issue.

This happens only if there's an input inside the modal and I tap that input. In the same moment that input got focus and native iOS keyboard become visible.

Page below modal in the same moment is automatically scrolled to 50% of its height. This behaviour is totally unwanted and I have no clue how to prevent this default iOS "feature".

Demo:

enter image description here

javascripthtmlioscssvertical-scrolling


Solution 1:[1]

I have experienced this issue as well. A short explanation is that iOS Safari will try to auto scroll to any input that is focused on and in this particular case the focused element is within a fixed positioned element. Safari seems to struggle with finding the fixed position element when it wants to center the element on the screen hence the background scrolling.

One possible fix is to add a touchstart event listener to the input field and calculate the current position of the overlay, change the positioning to absolute and update the top/left position to place the overlay back where it was on the screen when fixed positioned, and finally add a new blur listener to reset the overlay back to fixed positioning when leaving focus/blurring on the input. This should prevent the page from scrolling. I suggest using touchstart because it should trigger before the focus event at which case the page will already start scrolling. Safari should be able to find and center the absolute positioned overlay when the focus event is triggered.

Solution 2:[2]

So i have solved this and tested on my Iphone 5, don't have Ipad to check. I have disable overflow:hidden in my solution, you can add, If you want to disable scroll all in one for all modals. Solution is to add basically height and position property to both html and body element. 

html, body {
   position:relative;
   /*overflow:hidden;*/
   height: 100%;
}

So, that only when you focus on input, height and position will be defined, i have already coded this solution from your repo, i will send you a pull request. I have also added browserSync in your gulp setup. Therefore, Now it will be easy to test across any device.

Cheers!

EDIT: another way, if above solution don't work for some reason. then,

 /*
  * @summary touch handler; will remove touch ability
  * @author yeomann
  */
  function Touchyhandler(e) {
    e.preventDefault();
  }

and later pragmatically add and remove touch listener like this

//to add
document.addEventListener('touchmove', Touchyhandler, false); 
//to remove   
document.removeEventListener('touchmove', Touchyhandler);

above js solution tested on IOS 9.3.2 work like charm for me]

Solution 3:[3]

To stop the page from scrolling, in both x, and y axis, we use the overflow: hidden; attribute in css.

So if we apply this to the body,

body {
    overflow: hidden !important;
}

It should work right?

In fact, this actually doesn't work, because you've just disabled x and y scrolling for the entire page the for the entire time.

To bypass this, we can use a tad a javascript to add a class to the body when the modal is active.

First we must add an id to our body, <body id="body"> this allows javascript to recognize the body.

Secondly, we must add an id to our modal, <div id="modal">, also allowing javascript to recognize the modal.

<script type="text/javascript">
    function modalActive() {
        if (document.getElementById("modal").classList.contains("active")) {
            document.getElementById("body").classList.add("modal-active");
        } else {
            getElementById("modal").classList.remove("active"));
            getElementById("body").classList.remove("modal-active"));           
        }
    }
</script>

for both the button that launches, and closes the modal, we must add an onclick event,

<button onclick="modalActive()">Click Me!</button>

On top of that we must add this to the css file.

body {
    overflow: initial !important;
}

body.modal-active {
    overflow: hidden !important;
}

And there we go.

Solution 4:[4]

I'm not 100% sure but i could imagine the following:

When the keyboard appears, the window height decreases, but the scrollTop value is still the same, so the site jumps to that value. You could add overflow:hidden to the body when the modal is open. This will block the scrolling "behind" the modal and probably solve your problem.

Solution 5:[5]

I tried multiple things which kind of worked for the bouncing modal inputs on the html page. The simplest solution which worked for me was adding following styles to the body tag when the modal is open on the page.

position: fixed;
width: 100%;

Solution 6:[6]

Add this meta (maximum-scale=1, minimum-scale=1 ) to reset the scroll, which occurred when focusing the input field.

Solution 7:[7]

I had this issue after upgrading to iPadOS 13. I had to remove the following old JavaScript code, which was required to fix a different scrolling issue in older versions:

function fixIpadKeyboardScrolling() {
   if ((Device.is("ipad") || Device.is("iphone"))) {
    console.log("Fixing iPad/iPhone floating bar bug");
    var inputs = document.getElementsByTagName("input");
    if (inputs.length) {
      for (var i = inputs.length - 1; i >= 0; i--) {
        addListener(inputs[i], "blur", function () {
          setTimeout(function () {
              window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
          }, 0);
        });
      }
    }
    console.log(inputs.length + " input controls where edited to fix keyboard scrolling");
  }
}

If you are suddenly experiencing this issue after upgrading you may have similar code applied to your application.

In my case I added detection for version safari mobile 13 and only run the script for versions less than that.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 The_Dude
Solution 2
Solution 3
Solution 4
Solution 5 Paul Roub
Solution 6 Pranav K
Solution 7 Sebris87

Related Questions