Encountering a challenge while developing a chat input that needed to stay fixed at the bottom of the page, I faced an issue with the iOS keyboard overlapping the input field. Determining the exact height of the keyboard proved to be quite tricky. In my quest for a reliable value to use for positioning the chat input container above the keyboard, I sought to find the current "innerHeight" value, representing the visible area of the webpage. Due to the behavior of the iOS keyboard, it seemed that the only way to obtain this value with the keyboard open was by scrolling to the very bottom of the page and taking a sample of "window.innerHeight".

To tackle this problem, I set up an event listener on the input field triggered by a 'click' event (as using 'focus' caused issues). This action opened the keyboard, which took some time. Therefore, I implemented a timeout of 1000ms to ensure that the keyboard was fully open. After the timeout, I scrolled quickly to the bottom of the page using JavaScript, recorded the value of "window.innerHeight" in that state, and then returned to my original position. This method allowed me to capture the actual height of the visible screen area.

It appeared that the browser window remained placed behind the keyboard until reaching the bottom, at which point the whole window would 'scroll up', aligning the bottom with the top of the keyboard view.

With the obtained value, I calculated where to position the chat input by adding the currently scrolled value (window.scrollY) with the saved value and subtracting the height of my absolutely positioned element. To prevent flickering during scrolling, I also chose to hide the input field. One drawback of this approach was a quick flicker of the page when measuring at the bottom.

I encountered difficulty in determining the variable height of the address bar but opted to make the input slightly taller than necessary to accommodate any potential padding required.

Take a look at this discussion, which suggests a workaround that might be more practical from a coding perspective. Essentially, it involves using the height of the keyboard to adjust the content visibility. Although somewhat unconventional, pinpointing the exact height of the keyboard on different devices can be a challenge.

Unfortunately, the iOS Safari keyboard is not included in the browser viewport, making it impossible to reference like standard elements.

@Bhimbim's solution could also be worth trying out.

Best regards, -B

I've encountered this issue in the past and here's what worked for me:

1. Set up a listener to detect keyboard input.
2. Adjust the height of your webview when the keyboard appears by calculating the difference between the screen height and the keyboard height.
3. Make sure your HTML is responsive to make this workaround effective.

If you're interested, I can provide more code related to IOS for implementing this solution. Thank you

Hi there, apologies for the confusion earlier. If you're still looking to manage the keyboard through listeners, I have a workaround that might help. It may not be perfect but it's worth a try:

1. Add a listener on your webpage to detect when the keyboard shows up, possibly using jQuery events like onkeyup or onfocus on your text fields.
2. Use this information to determine when the keyboard is active and adjust your layout accordingly with JavaScript.

Hopefully, this insight helps you out. Thank you @Beaniie!

Hello Andreyu! You are correct about the difficulty in determining the keyboard height unlike in the case of WebView where I could easily access it through IOS code. Here's another workaround that might be helpful. Although not ideal, it involves comparing screen sizes from various IOS devices to estimate the keyboard height. Good luck!

I have come up with a solution where myBottomDiv, which is a fixed bottom div for chat with an input, needs to be made absolute and its position changed every time the page moves on Safari for iOS. I am hopeful that Safari will introduce meta interactive-widget=resizes-content feature similar to Chrome in the future.

// Specifically tailored for Safari on iOS
// (use interactive-widget=resizes-content to resolve issues in Chrome)
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
    if (navigator.userAgent.indexOf('Chrome') === -1 && navigator.userAgent.indexOf('Safari') > -1) {

        // Set body position to relative
        document.body.style.position = 'relative';
        let marginTop = parseInt(window.getComputedStyle(document.body).marginTop);
    
        // Adjust myBottomDiv positioning (a div containing an input for chat)
        myBottomDiv.style.position = 'absolute';
    
        // Event listeners (using touchmove over scroll event for better performance on mobile)
        window.addEventListener("scroll", resizeHandler);
        window.addEventListener("touchmove", resizeHandler);
        window.visualViewport.addEventListener("resize", resizeHandler);
    
        function resizeHandler() {
            myBottomDiv.style.top = (window.scrollY +  window.visualViewport.height - marginTop - myBottomDiv.offsetHeight) + 'px';
        }
    }
}