972: These Things Make Your App Feel Like Crap on Mobile

What It Covers

Scott Tolinski and Wes Bos identify specific technical issues that make mobile web apps feel inferior to native apps. They cover input zooming, horizontal scrolling, text selection, layout shifts, loading performance, viewport units, and scroll traps. The hosts provide concrete CSS and JavaScript solutions developers can implement immediately to improve mobile web experiences.

Key Questions Answered

• •Input Zoom Prevention: Set all input fields to 16 pixels or larger font size to prevent mobile browsers from automatically zooming when users tap form fields. Browsers zoom inputs smaller than 16px, leaving users stuck in a zoomed state with horizontal scroll after closing the keyboard. Use media queries to apply 16px specifically on mobile while maintaining smaller sizes on desktop.
• •Cumulative Layout Shift (CLS): Eliminate content jumping during page load by reserving space for dynamic elements like images, breadcrumbs, and banners before they render. Client-side hydration often causes multiple layout shifts as navigation elements and content populate sequentially. Use proper image dimensions, skeleton screens, and server-side rendering to prevent the page from shifting after initial paint, which creates a janky experience.
• •Viewport Height Units: Replace standard 100vh with dynamic viewport height (dvh) units to account for mobile browser address bars that appear and disappear during scrolling. Traditional viewport units cause content to extend beyond visible screen area when address bars are present. The dvh unit adjusts fluidly as browser chrome changes, while lvh and svh provide large and small fixed values for specific use cases.
• •Optimistic UI Updates: Make interfaces respond instantly to user actions by updating the UI before server confirmation, then rolling back only if the request fails. Native apps feel faster because they store data in local SQLite databases and sync in background. Implement local data caching with tools like TanStack Query to eliminate loading spinners and provide immediate feedback on button clicks and form submissions.
• •Frame Rate Consistency: Maintain consistent frame rates rather than chasing maximum FPS, as users notice dropped frames more than lower steady rates. Use Chrome DevTools command palette (Cmd+Shift+P) and type "FPS" to show the frames per second meter and identify performance bottlenecks. Transitions on background colors across many elements tank performance; use opacity transitions on pseudo-elements instead to maintain smooth 60fps scrolling.