Skip to content

Instantly share code, notes, and snippets.

View kiding's full-sized avatar
🦑
🦜 🦜 🦜 🦜

Dongsung "Donny" Kim kiding

🦑
🦜 🦜 🦜 🦜
View GitHub Profile
@kiding
kiding / NoScrollOnInputFocusiOSSafari.html
Last active April 25, 2024 08:14
Preventing iOS Safari scrolling when focusing on input elements
<!--
When an input element gets focused, iOS Safari tries to put it in the center by scrolling (and zooming.)
Zooming can be easily disabled using a meta tag, but the scrolling hasn't been quite easy.
The main quirk (I think) is that iOS Safari changes viewport when scrolling; i.e., toolbars shrink.
Since the viewport _should_ change, it thinks the input _will_ move, so it _should_ scroll, always.
Even times when it doesn't need to scroll—the input is fixed, all we need is the keyboard—
the window always scrolls _up and down_ resulting in some janky animation.
However, iOS Safari doesn't scroll when the input **has opacity of 0 or is completely clipped.**