How to prevent iOS keyboard from pushing the view off screen with CSS or JS

For anyone stumbling into this in React, I've managed to fix it adapting @ankurJos solution like this:

const inputElement = useRef(null); useEffect(() => { inputElement.current.onfocus = () => { window.scrollTo(0, 0); document.body.scrollTop = 0; }; }); <input ref={inputElement} /> 

Turns out, all you have to do is add

position:fixed 

To the body tag. This will move the body back down when the virtual keyboard hides.

I struggled with this for awhile, I couldn't find something that worked well for me.

I ended up doing some JavaScript hackery to make it work.

What I found was that Safari wouldn't push the viewport if the input element was in the top half of the screen. That was the key to my little hack:

I intercept the focus event on the input object and instead redirect the focus to a invisible (by transform: translateX(-9999px)). Then once the keyboard is on screen (usually 200ms or so) I trigger the focus event on the original element which has since animated on screen.

It's a kind of complicated interaction, but it works really well.

function ensureOffScreenInput() { let elem = document.querySelector("#__fake_input"); if (!elem) { elem = document.createElement("input"); elem.style.position = "fixed"; elem.style.top = "0px"; elem.style.opacity = "0.1"; elem.style.width = "10px"; elem.style.height = "10px"; elem.style.transform = "translateX(-1000px)"; elem.type = "text"; elem.id = "__fake_input"; document.body.appendChild(elem); } return elem; } var node = document.querySelector('#real-input') var fakeInput = ensureOffScreenInput(); function handleFocus(event) { fakeInput.focus(); let last = event.target.getBoundingClientRect().top; setTimeout(() => { function detectMovement() { const now = event.target.getBoundingClientRect().top; const dist = Math.abs(last - now); // Once any animations have stabilized, do your thing if (dist > 0.01) { requestAnimationFrame(detectMovement); last = now; } else { event.target.focus(); event.target.addEventListener("focus", handleFocus, { once: true }); } } requestAnimationFrame(detectMovement); }, 50); } node.addEventListener("focus", handleFocus, { once: true }); 

Personally I use this code in a Svelte action and it works really well in my Svelte PWA clone of Apple Maps.

Video of it working in a PWA clone of Apple Maps

You'll notice in the video that the auto-complete changes after the animation of the input into the top half of the viewport stabilizes. That's the focus switch back happening.

The only downside of this hack is that the focus handler on your original implementation will run twice, but there are ways to account for that with metadata.

CSS,

html, body { overflow-y: auto; overflow-x: hidden; position: fixed; }

On the latest version of iOS (18.11) this was the only thing that worked for me inside of a PWA.

function renderAfterIOSKeyboardClosed(event) { // After a keyboard is closed on IPAD MINI 6TH GENERATION iOS 18.1.1 there is a large blank space left after pushing the content up. // This detects the keybord closing, and waits for the paint cycle to trigger a repaint by scrolling // Only apply to inputs and textareas if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') { console.log('Element blurred:', event.target); // Use requestAnimationFrame to wait for the next paint cycle requestAnimationFrame(function () { // If the target was pushed out of view, scroll it into view. event.target.scrollIntoView({ behavior: 'instant', block: 'end' }); }); } } // Attach globally for all blur events document.addEventListener('blur', renderAfterIOSKeyboardClosed, true); // Use capturing phase for delegation 

you could also do this if you don't want scrollTo the top(0, 0)

window.scrollBy(0, 0) 

const handleResize = () => { document.getElementById('header').style.top = window.visualViewport.offsetTop.toString() + 'px' } if (window && window.visualViewport) visualViewport.addEventListener('resize', handleResize) 

Source: https://rdavis.io/articles/dealing-with-the-visual-viewport