Just a heads-up for anyone who finds themselves here.

Safari seems to consider this a feature. If you're not a fan of this "feature," there's a bug report here where you can voice your feedback.

When you bring up the keyboard, the browser's window gets pushed up and your content may get hidden as a result of the window being off-screen. Other strange behaviors can also occur, like what was demonstrated by the OP.

https://i.sstatic.net/dBuYh.gif

For more insights and additional examples of peculiar behaviors, refer to this blog post (the image above was taken from it):

Issue Resolved! Simply include the following code in your script

//accessing the input field (Whenever you click to focus)
let inputField = document.getElementById("input_focused")

 /*
 * Method 1: Temporarily change the opacity.
 * Element may "blink" when focused in certain scenarios.
 */
inputField.addEventListener("focus", () => {
      methodOne.style.opacity = 0;
      setTimeout(() => methodOne.style.opacity = 1);
    });

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

For more details, please visit https://gist.github.com/kiding/72721a0553fa93198ae2bb6eefaa3299

One can effectively monitor changes in viewport height using JavaScript:

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

This method has been successfully tested on an iPhone (specifically a physical iPhone 11 with iOS 15.1)

For more information, refer to the MDN documentation: https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API

Could you experiment with this CSS and see how it affects the layout?

html {
  height: 100%;
}

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

This technique was really helpful in a recent project of mine...

To prevent scrolling when the keyboard is open, add this code to the body element:

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

Don't forget to unbind it when you want scrolling to resume:

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

If you also use height:100% or 100vh and overflow:hidden, everything should function smoothly.

To address this issue, the solution involves implementing a script that monitors the appearance of the keyboard. When the keyboard is detected, it will assign the "kb_active" class to the body element and store the new offset value as a data attribute called "data-window-offset". These values can then be utilized in CSS and other JavaScript functionalities.

function monitor_keyboard_status(){
    // For mobile or tablet devices
    if(window.innerWidth < 950) {
        var kb_status = false;
        var initial_screen_size = window.innerHeight; 
        var interval_id = window.setInterval(update_kb_status, 1000);

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

Subsequently, we can respond to this event by repositioning elements accordingly.

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 unique feature in iOS prevents the keyboard from obstructing the input field.

To address this issue in my own project, I implemented a solution where the window is scrolled back to the top when the keyboard closes. Additionally, if the window is already scrolling and the keyboard is not open, it automatically scrolls to the top.

var isAppleMobileDevice = true; // custom logic to determine device type

if (isAppleMobileDevice) {

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

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

    // Scroll to the top if keyboard is not open during scroll
    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);
        }
    });

}