After testing my application on iOS, I noticed that, unlike Android devices, the soft keyboard does not push the content above. It keeps the page's original height and lets the user scroll as usual. To fix this, I have attached an event listener to the viewport and made the container that holds all the visible content match the viewport's height.
window.visualViewport.addEventListener("resize", function() {
document.querySelector("#content").style.height = window.visualViewport.height + "px";
});
The code does solve the problem to some extent since it does push the visible content above the keyboard. However, when the keyboard is visible, the tag appears to ignore every single stylesheet and set itself to 100% of the window's height.
html, html body {
height: auto;
}
I assume stopping the scrolling altogether may be a solution if the browser refuses to listen to the CSS no matter what. I, unfortunately, have no idea how to do this and, so far, have been out of luck finding a solution. Setting the overflow property of the <html></html> tag to hidden does not seem to do anything. Any help is appreciated!