Bug 238497

Summary: REGRESSION: CSS scroll-behavior: smooth with overflow: hidden breaks JS scrollTo/scrollLeft/scrollTop
Product: WebKit Reporter: Peter <peter>
Component: ScrollingAssignee: Nikos Mouchtaris <nmouchtaris>
Status: RESOLVED FIXED    
Severity: Critical CC: alexis.dubois, allllllx, clshortfuse, delatorre.juanpablo, malaudh, mic.gallego, peter, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: All   
OS: All   
See Also: https://bugs.webkit.org/show_bug.cgi?id=242224
https://bugs.webkit.org/show_bug.cgi?id=245300
Attachments:
Description Flags
Image none

Description Peter 2022-03-29 02:26:33 PDT 
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
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 
<rdar://problem/90990040>
Comment 3 Simon Fraser (smfr) 2022-03-29 11:55:06 PDT 
<rdar://problem/89564973>
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 
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?
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]
Image
Comment 11 mic.gallego 2022-06-30 18:11:16 PDT 
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.
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 
Hello,
Any news of the target release version to fix this bug ?