Fixing the Mobile Web - tips and tricks that can save your sanity
summary
Claims that 3D transforms always speed mobile rendering prove false: translateZ trigger offloads rendering to GPU but causes rendering artifacts, broken masks and worse performance once the GPU’s max texture size is exceeded, so apply transforms per item not the whole list. Galaxy S3 requires a ~1ms transition to force hardware acceleration. Default Android browser lacks HTML5 form pickers; older Android webviews freeze pages when a second webview opens. Use webkit-user-modify to remove Android’s fake input at the cost of swipe keyboards.
AI-written summary · about
chapters (7)
- 0:00Start
- 0:37Smartphones Change the Web Landscape
- 1:06Smartphone Parroting Systems
- 3:52Performance Issues
- 5:15Webkit Masks
- 8:25Support for Html5 Form Elements
- 13:12Force the Browser To Apply the Changes
related talks
28mTricks and hacks for a more native feel in a mobile browser
28mBeyond Responsive: Building a mobile web you're f*ing proud of
39mPushing the Limits of Mobile Performance
53mPerformance Checklist for the Mobile Web
43mThe Mobile Web: MIA
49mRendering without lumpy bits
37mAdapting to the Mobile Web F̶u̶t̶u̶r̶e̶ Present
40mJS performance in mobile web and hybrid apps… because science!