Bug 238497 – REGRESSION: CSS scroll-behavior: smooth with overflow: hidden breaks JS scrollTo/scrollLeft/scrollTop

• Component: Scrolling
• Status: RESOLVED FIXED

[Peter]

Hello,

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


Description:

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.

Reproduction:
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.


Peter

[Simon Fraser (smfr)]

Thank you for the report.

[Radar WebKit Bug Importer]

<rdar://problem/90990040>

[Simon Fraser (smfr)]

<rdar://problem/89564973>

[Simon Fraser (smfr)]

We start a ScrollAnimationSmooth but never service it.

[Simon Fraser (smfr)]

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.

Hi,

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?

[Carlos Lopez]

This has broken our ARIA tab panel system. It's been over a month and listed as critical. Can somebody please be assigned?

[Nikos Mouchtaris]

Pull request: https://github.com/WebKit/WebKit/pull/1387

[EWS]

Committed r295448 (251454@main): <https://commits.webkit.org/251454@main>

Reviewed commits have been landed. Closing PR #1387 and removing active labels.

Created attachment 460596 [details]
Image

Hi,

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.

[Simon Fraser (smfr)]

That site appears to still be broken with the fix. I filed bug 242224 to track.

[Harry]

I can confirm that this is still happening (with element.scroll({options}) method)

[Simon Fraser (smfr)]

Harry, could you point to an example that still fails? Thanks.

(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.

[Simon Fraser (smfr)]

Can you test a recent Safari Tech Preview?

(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.

[Alexis]

Hello,
Any news of the target release version to fix this bug ?