I'm experiencing a frustrating issue with Google Chrome on my iPad (version 147.0.7727.22, iPadOS 26.1). When I focus on a form at the bottom of a website, the virtual keyboard appears as expected. However, when I hide the virtual keyboard, it leaves a blank space about the same height as the keyboard itself. I expected this space to disappear, similar to how it works in Safari. This problem is causing issues with my web app's user experience because the content overlaps with the page's scroll. I'm trying to ensure my app is responsive for both desktop and tablet users. Has anyone else dealt with this, and if so, could you provide some guidance? Thanks!
3 Answers
That sounds super annoying! I've had a similar problem with my web app when it's installed as a PWA. I didn’t find a solid solution either, so I'm just hoping for updates that might fix this in the future.
You might want to check out using dvh units for your layout. They could help adjust the height dynamically when the keyboard appears or disappears. Here's a link to the documentation if you want to dig deeper: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length
Ah, the classic iOS web development struggle! It’s rough out there, especially with Chrome on iPad. Many developers have noticed similar issues. Unfortunately, all browsers on iOS use Safari's engine, which is why you get this strange behavior in Chrome. It really does feel like we’re back in the days of IE6 at times! Have you tried testing other browser settings or CSS fixes?
Right? Safari seems to have its quirks, but I also think Chrome's handling on iPad can leave a lot to be desired these days.
That's the weird part—Safari on my iPad doesn't have this issue at all! It's driving me nuts trying to figure it out.