---
name: mobile-popup
title: Mobile pop-ups that do not jank
summary: Make profile pop-ups and modals scroll smoothly on every phone — no jumping, no losing your place.
tags: [web, mobile]
---
# Mobile pop-ups that do not jank

Three bugs we hit on a talent page, and the fixes.

1. **It opens scrolled to the bottom.** Phones move focus to the first button, often at the bottom. Put an invisible focus target at the top of the pop-up and reset its scroll to 0 when it opens.
2. **The page behind jumps to the top when you close it.** Locking the page with `overflow:hidden` on `<html>` resets the scroll on iPhone. Instead, save `scrollY`, fix the body in place with `position:fixed; top:-scrollY`, and restore the scroll when the pop-up closes.
3. **The pop-up grows and shrinks while you scroll.** Heights in `vh`/`dvh` change when the browser bar hides. Use `svh` (small viewport height) or fixed sizes for images inside the pop-up, and add `env(safe-area-inset-bottom)` padding so the buttons stay above the toolbar.

Also: no autoplay video inside a pop-up. Show a poster image and play on tap — loading videos resize the layout.

Test on small and large iPhones and on several Android phones before you ship.