zzstoatzz.io / plyr.fm
music on atproto plyr.fm
fork atom

fix: force player to stick to bottom on Chrome iOS (#120)

Adds viewport-fit=cover to meta viewport and hardware acceleration
via translateZ(0) to force the player to stick to the visual viewport
bottom on Chrome iOS where the address bar causes layout shifts.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude <noreply@anthropic.com>

authored by zzstoatzz.io Claude and committed by GitHub 1c3f920d ad38bb73

options
unified split
Changed files
+8 -3
frontend
src
app.html
lib
components
Player.svelte
+1 -1
frontend/src/app.html
··· 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 - <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 %sveltekit.head% 7 </head> 8 <body data-sveltekit-preload-data="hover">
··· 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 + <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> 6 %sveltekit.head% 7 </head> 8 <body data-sveltekit-preload-data="hover">
+7 -2
frontend/src/lib/components/Player.svelte
··· 303 <style> 304 .player { 305 position: fixed; 306 - bottom: env(safe-area-inset-bottom, 0); 307 left: 0; 308 right: 0; 309 background: #1a1a1a; 310 border-top: 1px solid #333; 311 - padding: 0.75rem 2rem 0.75rem 2rem; 312 z-index: 100; 313 } 314 315 .player-content { ··· 596 @media (max-width: 768px) { 597 .player { 598 padding: 1rem; 599 } 600 601 .player-content {
··· 303 <style> 304 .player { 305 position: fixed; 306 + bottom: 0; 307 left: 0; 308 right: 0; 309 background: #1a1a1a; 310 border-top: 1px solid #333; 311 + padding: 0.75rem 2rem; 312 + padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); 313 z-index: 100; 314 + /* force player to stick to visual viewport bottom on iOS Chrome */ 315 + transform: translateZ(0); 316 + -webkit-transform: translateZ(0); 317 } 318 319 .player-content { ··· 600 @media (max-width: 768px) { 601 .player { 602 padding: 1rem; 603 + padding-bottom: max(1rem, env(safe-area-inset-bottom)); 604 } 605 606 .player-content {