Skill · web, mobile

Mobile pop-ups that do not jank

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

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.
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.
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.