Developer Reference

iOS Quirks

Common iOS browser bugs explained with visuals and copy-paste fixes. Affects Safari, Chrome, and every browser on iOS.

10Articles
CSSFocus
Hours saved

All articles

📐

100vh and the Dynamic URL Bar

Elements sized to 100vh overflow the visible screen when the browser URL bar is visible on page load.

🔒

overflow: hidden Doesn't Lock Body Scroll

Background content remains scrollable beneath modals and drawers — CSS alone can't stop it on iOS.

🔍

Auto-Zoom on Input Focus

iOS automatically zooms in when a form input with font-size < 16px is focused.

⌨️

position: fixed Breaks with Virtual Keyboard

Fixed elements shift up with the keyboard instead of anchoring to the visible bottom.

Unwanted Tap Highlight Flash

Tapping interactive elements shows a translucent grey flash that breaks custom designs.

▶️

Video Autoplay Restrictions

iOS blocks video autoplay unless the video is muted and marked as inline. Audio never autoplays.

📱

Safe Area Insets (Notch & Home Bar)

Content can be hidden behind the Dynamic Island or home indicator on modern iPhones.

🏀

Rubber-Band Scroll Leaking to the Page

iOS's rubber-band overscroll effect can pull the entire page from inside a scroll container.

💨

Sluggish Scroll in Overflow Containers

Scrollable divs feel choppy on older iOS because momentum scrolling isn't applied by default.

📅

<input type="date"> Inconsistencies

Date inputs render as an unstyleable native drum-picker wheel. Chrome on iOS uses a different UI.