Stop the mobile focus zoom on text fields
This commit is contained in:
@@ -40,6 +40,12 @@ mobile draft at 390px.
|
|||||||
- [x] C11 preview caching: Discord-hosted image/GIF previews (WebP 320px, hash-addressed, 5 MiB
|
- [x] C11 preview caching: Discord-hosted image/GIF previews (WebP 320px, hash-addressed, 5 MiB
|
||||||
cap, one attempt) run after every walk in both modes. Live run `...-20260916090722`:
|
cap, one attempt) run after every walk in both modes. Live run `...-20260916090722`:
|
||||||
`previewed: 2`; thumbs served over `/api/media/<scrape>/<item>/thumb` (200).
|
`previewed: 2`; thumbs served over `/api/media/<scrape>/<item>/thumb` (200).
|
||||||
|
- [x] C79 Mobile form controls and the focus zoom. iOS Safari zooms the page when a focused
|
||||||
|
text field renders below 16px and does not always zoom back out. `style.css` now forces 16px
|
||||||
|
on text-entry controls at the mobile breakpoint (25 fields were under 16px, the smallest 11px),
|
||||||
|
sets `text-size-adjust: 100%`, and adds `touch-action: manipulation` to controls. Sliders keep
|
||||||
|
their own font size so em-based thumbs do not resize; desktop sizes are unchanged. Verified at
|
||||||
|
390px: no field under 16px, no horizontal overflow, desktop still 13.5px.
|
||||||
- [x] C78 Chat starts on the newest message. `renderMessages` pins the scroll when the channel
|
- [x] C78 Chat starts on the newest message. `renderMessages` pins the scroll when the channel
|
||||||
changes or the user is already at the bottom, re-pins on the next frame and after 120/400 ms,
|
changes or the user is already at the bottom, re-pins on the next frame and after 120/400 ms,
|
||||||
and re-pins on late image loads while pinned. `overflow-anchor: none` on `.vk-message-scroll`
|
and re-pins on late image loads while pinned. `overflow-anchor: none` on `.vk-message-scroll`
|
||||||
|
|||||||
@@ -2136,3 +2136,30 @@ a.vk-attachment:hover {
|
|||||||
right: calc(50% - 26px);
|
right: calc(50% - 26px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Mobile form controls ─────────────────────────────────────────────────────
|
||||||
|
iOS Safari zooms the whole page when a focused text field renders below 16px,
|
||||||
|
and it does not always zoom back out when the field loses focus. Force 16px
|
||||||
|
on text-entry controls at the mobile breakpoint, stop the landscape text
|
||||||
|
inflation, and drop the double-tap zoom delay on controls. Sliders, check-
|
||||||
|
boxes, and radios keep their current sizing (they never trigger focus zoom,
|
||||||
|
and em-based slider thumbs must keep their own font size). */
|
||||||
|
html {
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
select,
|
||||||
|
button {
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
font-size: 16px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user