jozamudi/ani-web
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile audit fixes: iOS input auto-zoom + tap delay

Browse Source 
Audited on iPhone SE (320px), iPhone 13, Pixel 5 emulations:
- FOUND: login/search inputs at 13.3px (< 16px) -> iOS Safari
  auto-zooms the page on focus. Fixed: 16px in style.css AND
  login.html (separate page with own CSS).
- FOUND: no touch-action anywhere -> double-tap-zoom tap delay on
  buttons. Fixed: touch-action: manipulation on interactive elements
  in both stylesheets.
- FOUND: .pl-spin missing from prefers-reduced-motion. Added.
- VERIFIED CLEAN: no horizontal overflow at 320/390/393px, controls
  row fits, chip+gauge in viewport, episode grid 66x31 ok,
  Tap-to-play gesture flow works on BOTH hls.js and native paths
  (simulated iOS autoplay block), toast fits, zero JS errors,
  desktop playback regression OK, 18/18 API tests.
assets v=7; login.html is no-store so updates without a bump.
This commit is contained in:
jozamudi committed 2026-08-31 19:40:07 +00:00
1 parent 9b90be3a10
commit 8f6d4dcf77
3 files changed
+11 -5
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

static/login.html
+4 -2
View File
@@ -12,9 +12,11 @@ form { background:var(--card); border:1px solid var(--bd); border-radius:10px;
padding:2rem; width:280px; }
h1 { font-size:1.1rem; margin:0 0 1rem; color:var(--acc); }
input { width:100%; box-sizing:border-box; padding:.55rem .8rem; border-radius:8px;
border:1px solid var(--bd); background:var(--bg); color:var(--fg); margin-bottom:.6rem; }
border:1px solid var(--bd); background:var(--bg); color:var(--fg); margin-bottom:.6rem;
font-size:16px; } /* >=16px stops iOS Safari auto-zoom on focus */
button { width:100%; margin-top:.4rem; padding:.55rem; border:0; border-radius:8px;
background:var(--acc); color:#000; font-weight:600; cursor:pointer; }
background:var(--acc); color:#000; font-weight:600; cursor:pointer;
touch-action:manipulation; }
.err { color:#f87171; font-size:.85rem; margin:.6rem 0 0; min-height:1.2em; }
.banner { position:fixed; top:1rem; left:50%; transform:translateX(-50%); background:var(--card);
border:1px solid var(--bd); border-radius:8px; padding:.4rem .9rem; color:var(--muted);