Fix article-view swipe being swallowed by Chrome-on-Android back gesture

On real Android touchscreens, a horizontal drag on content with nothing
left to scroll horizontally gets claimed by Chrome's native
swipe-to-go-back/forward gesture before our own touchend listener
(article-view swipe navigation) ever sees it — silently, with no
touchend firing at all. Synthetic touch testing (mouse-drag emulation
in devtools) doesn't go through that gesture recognizer, so it worked
there while doing nothing on an actual phone.

Fix: overscroll-behavior-x: contain on body stops Chrome from claiming
the gesture for its own navigation, letting our touchend fire normally.

Also drops the overflow-x: hidden added to .article-single for the
slide transition — body already has it (for the same full-bleed-image
reason), so it was redundant.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-26 21:27:23 +02:00
co-authored by Claude Sonnet 5
parent 15ac8c287b
commit 49ceec5125
2 changed files with 6 additions and 1 deletions
+6
View File
@@ -81,6 +81,12 @@ body {
wider than the visible content area (scrollbar) and would otherwise wider than the visible content area (scrollbar) and would otherwise
introduce a horizontal scrollbar. */ introduce a horizontal scrollbar. */
overflow-x: hidden; overflow-x: hidden;
/* Without this, a horizontal touch drag on content with nothing left to
scroll (true here, given overflow-x: hidden above) is claimed by
Chrome-on-Android's native swipe-to-go-back/forward gesture before our
own touchend listener (article-view swipe navigation) ever sees it —
the gesture is silently swallowed with no error, no touchend fires. */
overscroll-behavior-x: contain;
color: var(--color-text); color: var(--color-text);
background: var(--color-background); background: var(--color-background);
transition: color 0.5s, background-color 0.5s; transition: color 0.5s, background-color 0.5s;
-1
View File
@@ -367,7 +367,6 @@ onMounted(async () => {
align-items: center; align-items: center;
padding-top: 1em; padding-top: 1em;
padding-bottom: 5rem; padding-bottom: 5rem;
overflow-x: hidden;
} }
.article-feature { .article-feature {