IOS Safari: unwanted scroll when keyboard is opened and body scroll is disabled

Just some info for anyone arriving here.

Safari thinks this is feature. There is a bug report here (let them know you don't like this "feature" =]).

When you open the keyboard, the browser's window is moved up and your content is hidden because the window is out of the screen. Other weird behaviors can happen too, like the one the OP showed.

Check this blog post for more details and more examples of weird behaviors (I copied the image above from it): https://blog.opendigerati.com/the-eccentric-ways-of-ios-safari-with-the-keyboard-b5aa3f34228d

Resolved!!!!! Just please add those codes to your script

//reach out to that input field (When ever u r gonna click tofocus)
let inputField = document.getElementById("input_focused")

 /*
 * Method 1: Briefly change the opacity.
 * Element might "blink" on focus in some scenarios.
 */
inputField.addEventListener("focus", () => {
      methodOne.style.opacity = 0;
      setTimeout(() => methodOne.style.opacity = 1);
    });

  <section id="modal">
    <input id="input_focused">
  </section>

Check out for further information https://gist.github.com/kiding/72721a0553fa93198ae2bb6eefaa3299

It is possible to listen to these viewport height changes in JS:

window.visualViewport.addEventListener(
  'resize', 
  event => console.log(event.target)
);

This works on iPhone (tested on physical iPhone 11 with iOS 15.1)

MDN doc: https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API

can you try this css please..

html {
  height: 100%;
}

body.disable-scroll {
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  height: 100vh;
  overflow: hidden;
}

I did this in one of my projects...

When you open the keyboard use this on body

$(body).bind('touchmove', function (e) {
    e.preventDefault()
});

And then unbind it when you want to scroll again

$(body).unbind('touchmove');

If you combine it with height:100% or 100vh and overflow:hidden. It should work.

You can solve it by running this script which detects when the keyboard is showing and it will add class "kb_active" to body and the new offset value as an attribute to the body "data-window-offset" so we can use these values in css and another javascript code

function watch_mobile_keyboard_status(){
    // If mobile or tablet
    if(window.innerWidth < 950) {
        var kb_status = false;
        var initial_screen_size = window.innerHeight; // Checks initial height of the screen
        var interval_id = window.setInterval(toggle_kb_status, 1000);

        function toggle_kb_status(){
            if(initial_screen_size > window.innerHeight){
                if(!kb_status){
                    var diff = initial_screen_size - window.innerHeight;
                    document.querySelector('body').classList.add('kb_active');
                    document.querySelector('body').setAttribute('data-window-offset', diff);
                    kb_status = true;
                    document.dispatchEvent(new Event("change_keyboard_status"));
                }
            } else {
                if(kb_status){
                    document.querySelector('body').classList.remove('kb_active');
                    document.querySelector('body').removeAttribute('data-window-offset');
                    document.dispatchEvent(new Event("change_keyboard_status"));
                    kb_status = false;
                }
            }
        }
    }
}

And here we can detect the event and move the element to the new postion

if(is_ios()){
    document.addEventListener("change_keyboard_status", function(){
        var element = ".nav_box";
        var offset = document.querySelector('body').getAttribute('data-window-offset');
        if(offset & offset > 50){
            if(document.querySelector(element)){
                document.querySelector(element).style.top = offset + "px";
            }
        } else {
            document.querySelector(element).style.top = "";
        }
    });
}


function is_ios() {
    return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform)
    || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}

This feature from iOS ensures the keyboard does not cover the input.

In my project, I solved it by making sure when the keyboard closes scroll the window back to the top.
Also if the window is scrolling and the keyboard is not opened, scroll to the top.

var isAppleMobileDevice = true; // any logic here

if (isAppleMobileDevice) {

    // when the keyboard closes, scroll to the top
    window.addEventListener('focusout', function (e) {
        if (window.scrollY == 0)
            return;

        var isInput = e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA';
        if (isInput) {
            window.scrollTo(0, 0);
        }
    });

    // on scroll, if the keyboard is not opened, scroll to the top
    window.addEventListener('scroll', function (e) {
        if (window.scrollY == 0)
            return;

        var isInputFocused = document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA';
        if (!isInputFocused) {
            window.scrollTo(0, 0);
        }
    });

}