Bug 240183 – CSS overscroll-behavior-x: contain does not disable history navigation

• Status: NEW
• Component: CSS

[Šime Vidas]

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/

[Bruno Stasse]

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.

[Radar WebKit Bug Importer]

<rdar://problem/93266376>

[Dan]

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.

[Joni Korpi]

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.

[Matt]

Firefox has this implemented corretly according to spec