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:
@@ -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;
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user