Bug 240183 - CSS overscroll-behavior-x: contain does not disable history navigation
Summary: CSS overscroll-behavior-x: contain does not disable history navigation
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2022-05-06 14:06 PDT by Šime Vidas
Modified: 2024-02-06 13:33 PST (History)
15 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Šime Vidas 2022-05-06 14:06:25 PDT
Steps to reproduce: 

1. In desktop Safari, go to this page https://codepen.io/simevidas/full/BaYogWw
2. Use the trackpad two-finger-swipe gesture on the image carousel

What happened:

When you’re on the left-most image and swipe to the right, Safari will perform a back navigation. 

What should have happened:

The image scroll container has CSS `overscroll-behavior-x: contain`, so overscroll history navigation should be disabled while the mouse cursor is on top of it. Chrome and Firefox on macOS respect this. Safari doesn’t.

Additional notes:

I opened this bug because WebKit changeset 291497 [1] suggests that Safari’s behavior is on purpose. If that’s the case, could you explain why you don’t want websites to be able to disable overscroll history navigation via the CSS property? As my demo shows, there are legitimate use-cases for doing this.

[1]: https://trac.webkit.org/changeset/291497/webkit/
Comment 1 Bruno Stasse 2022-05-10 07:01:50 PDT
Per the specification, such browser action should indeed be prevented when setting `overscroll-behavior-x` to either `contain` or `none`: 

> 'contain': This value indicates that the element must not perform non-local boundary default actions such as scroll chaining or *navigation*.
From https://drafts.csswg.org/css-overscroll/#overscroll-behavior-properties.

This is important for most horizontal scroll-containers, as it is very easy to accidentally trigger history navigation while scrolling, causing very poor user experiences. This is one of the top reasons this specification was introduced and eagerly expected by developers.

Safari not respecting this also causes interoperability issues with Firefox and Chrome.
Comment 2 Radar WebKit Bug Importer 2022-05-13 14:07:12 PDT
Comment 3 Dan 2022-08-07 01:10:30 PDT
As previous comments mention, preventing navigation on horizontal swipes is a big part of the rationale for this CSS feature, and an aspect on which developers eagerly expected Safari to align with other browsers.

Please re-consider the decision to allow history navigation despite overscroll-behavior.
Comment 4 Joni Korpi 2023-03-08 06:12:41 PST
This behavior prevents any website from utilizing horizontal scrolling without hacky `event.preventDefault()` `wheel` listeners. (Hacky because it seems they need to be set on the element under the cursor, rather than a common parent like `document.body`.)

As the previous commenters have said, please reconsider this, if it was indeed done intentionally.
Comment 5 Matt 2023-12-11 10:01:35 PST
Firefox has this implemented corretly according to spec