Bug 238497 - REGRESSION: CSS scroll-behavior: smooth with overflow: hidden breaks JS scrollTo/scrollLeft/scrollTop
Summary: REGRESSION: CSS scroll-behavior: smooth with overflow: hidden breaks JS scrol...
Alias: None
Product: WebKit
Classification: Unclassified
Component: Scrolling (show other bugs)
Version: Safari 15
Hardware: All All
: P2 Critical
Assignee: Nikos Mouchtaris
Keywords: InRadar
Depends on:
Reported: 2022-03-29 02:26 PDT by Peter
Modified: 2023-08-16 07:43 PDT (History)
9 users (show)

See Also:

Image (2.61 MB, image/png)
2022-06-30 18:09 PDT, mic.gallego
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Peter 2022-03-29 02:26:33 PDT

This issue was introduced in Safari 15.4 and occurs on macOS and iOS.


When a scroll container has overflow: hidden; and scroll-behavior: smooth; set then scrolling via JavaScript using either scrollTo method or setting scrollLeft / scrollTop directly fails silently. 

No error is shown in the console and the scroll container does not scroll. This applies to both horizontal and vertical scrolling.

1) Open one of the samples:
horizontal scroll: https://jsfiddle.net/hmpeda/x2uhdn7z/3/
vertical scroll: https://jsfiddle.net/hmpeda/tz6jb7es/11/

2) click on the links below the red box (left / right respective up /down)

If you open the same examples on Safari 15.3 the scroll is working, silently ignoring the unsupported scroll-behavior: smooth; CSS attribute (which was only added in Safari 15.4).

When using the scrollTo method with the option behavior: smooth (instead of the CSS), the behavior is exactly the same.

When you remove scroll-behavior: smooth; CSS attribute, it is working the same way as it did in Safari 15.3 (but breaking smooth scrolling for all other browsers which do support scroll-behavior CSS attribute)

Expected Behavior:

JavaScript scrollTo/scrollLeft/scrollTop should be executed, as it did in all previous versions and as it does in all other major browsers.

Actual Behavior:

Scroll fails silently, no errors in the console, the scroll is just not executed.

In case you need any additional information, please let me know.

Comment 1 Simon Fraser (smfr) 2022-03-29 10:17:51 PDT
Thank you for the report.
Comment 2 Radar WebKit Bug Importer 2022-03-29 10:18:01 PDT
Comment 3 Simon Fraser (smfr) 2022-03-29 11:55:06 PDT
Comment 4 Simon Fraser (smfr) 2022-03-29 12:28:57 PDT
We start a ScrollAnimationSmooth but never service it.
Comment 5 Simon Fraser (smfr) 2022-03-29 12:39:51 PDT
The scrollable area is not added to FrameView's set of scrollable areas because it's not user-scrollable, so we don't traverse it in Document::runScrollSteps() to run the animation.
Comment 6 mic.gallego 2022-04-01 21:09:42 PDT

This is a pretty critical bug actually, as it broke all our sites that were using programmatic scroll.

The issue also happens for "scrollBy" on the element. Considering how critical this issue is and that it makes any website relying on overflow: hidden programmatic scroll broken, is there any hope to have this being fixed in a minor release as soon as possible?
Comment 7 Carlos Lopez 2022-05-16 07:13:20 PDT
This has broken our ARIA tab panel system. It's been over a month and listed as critical. Can somebody please be assigned?
Comment 8 Nikos Mouchtaris 2022-06-08 12:52:07 PDT
Pull request: https://github.com/WebKit/WebKit/pull/1387
Comment 9 EWS 2022-06-10 01:05:35 PDT
Committed r295448 (251454@main): <https://commits.webkit.org/251454@main>

Reviewed commits have been landed. Closing PR #1387 and removing active labels.
Comment 10 mic.gallego 2022-06-30 18:09:58 PDT
Created attachment 460596 [details]
Comment 11 mic.gallego 2022-06-30 18:11:16 PDT

Is this bug supposed to be fixed? I have tried on TP148 and the result is now even stranger. Since Safari 15.4 it did not scroll a bit. Now from TP148 it scrolls by a few pixels, but the position is completely off.

You can try here: https://focal-theme-carbon.myshopify.com/ and click on the arrows on the section I have sent as an attachment.
Comment 12 Simon Fraser (smfr) 2022-06-30 21:03:57 PDT
That site appears to still be broken with the fix. I filed bug 242224 to track.
Comment 13 Harry 2023-01-12 07:54:01 PST
I can confirm that this is still happening (with element.scroll({options}) method)
Comment 14 Simon Fraser (smfr) 2023-01-12 13:47:48 PST
Harry, could you point to an example that still fails? Thanks.
Comment 15 mic.gallego 2023-01-19 00:50:20 PST
(In reply to Simon Fraser (smfr) from comment #14)
> Harry, could you point to an example that still fails? Thanks.

I confirm this issue is still not fixed as per Safari 16.2. You can reproduce it here: https://en.horizonfarms.jp/products/pl200?_pos=2&_psq=whole+organic&_ss=e&_v=1.0

In the list of thumbnails below the product image, if you click on the last one, our image do a "scrollTo" with a smooth behavior. However, the overflow: hidden prevents it. Changing to overflow: visible fixes it.
Comment 16 Simon Fraser (smfr) 2023-01-19 11:46:41 PST
Can you test a recent Safari Tech Preview?
Comment 17 mic.gallego 2023-01-19 15:24:36 PST
(In reply to Simon Fraser (smfr) from comment #16)
> Can you test a recent Safari Tech Preview?

Seems to be fixed on TP. When is this plan to be released? Having such a basic API being broken from Safari 15.4 to Safari 16.3 (.4 ?) really was problematic.
Comment 18 Alexis 2023-03-01 06:38:14 PST
Any news of the target release version to fix this bug ?