Bug 193671 – Scroll Snap broken when using RTL layout

• Component: Scrolling
• Status: RESOLVED FIXED

[Graham]

Hi,

The scroll-snap behavior is broken when the HTML dir attribute is set to "rtl"

It starts on the right-most element as expected, but despite the child elements, there are only three scroll-snap points. 
One at the right-most position of the container, 
another at the almost-left-most position (maybe 30px offset from the left-most position) of the container,
and a final one at the left-most position of the container.
So the scroll-snap behavior skips over the middle elements which is not intended.

A example of the issue can be found here: https://codepen.io/theGrahamScanlon/full/KJKrJa
Please view the example using an iOS device to successfully reproduce the issue.

The device I'm running:
iPhone X (Model MQA62LL/A)
Version 12.1.2 (16C101)


This effects the three major browsers on iOS: Safari, Chrome and Firefox.


Thanks,
Graham

Please let me know if you have any questions.

[Radar WebKit Bug Importer]

<rdar://problem/47457471>

[Wenson Hsieh]

*** Bug 202377 has been marked as a duplicate of this bug. ***

[Elliott Sprehn]

This is impacting us at Airbnb and we've had to disable scroll snap for our users in Safari. @simon.fraser Would it be possible to get this prioritized? :)

[Simon Fraser (smfr)]

Created attachment 390899 [details]
WIP

[Rado]

Just encountered this shocking bug. Please fix it, thanks.

[Charlie Croom]

Wanted to add in that Twitter is exploring replacing a lot of our currently JS-heavy code with native web solutions including scrollSnap. However, the lack of support internationally means that scrollSnap is effectively not implemented in Safari, so we will also have to weigh disabling it or polyfillying.

Would be great to get some of these really critical bugs fixed! Thanks!

[Brent Fulgham]

(In reply to Charlie Croom from comment #6)
> Wanted to add in that Twitter is exploring replacing a lot of our currently
> JS-heavy code with native web solutions including scrollSnap. However, the
> lack of support internationally means that scrollSnap is effectively not
> implemented in Safari, so we will also have to weigh disabling it or
> polyfillying.
> 
> Would be great to get some of these really critical bugs fixed! Thanks!

I would love to get Scroll Snap into proper shape. I’ll see if Wenson and I can take another look soon.

Thank you for reaching out to help me gauge priority/interest.

[Antoine Quint]

Created attachment 403854 [details]
WIP

[Simon Fraser (smfr)]

Created attachment 405241 [details]
Patch

[Wenson Hsieh]

Comment on attachment 405241 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=405241&action=review

> Source/WebCore/page/scrolling/AxisScrollSnapOffsets.cpp:59
> +static LayoutUnit computeScrollSnapAlignOffset(LayoutUnit minLocation, LayoutUnit maxLocation, ScrollSnapAxisAlignType alignment, bool isRTL)

Nit - it seems a bit confusing that isRTL is false when computing offsets in the y-axis, even though we could be in RTL. What do you think about `isFlipped`, or `startsAtMaxLocation`?

[Simon Fraser (smfr)]

https://trac.webkit.org/changeset/264908/webkit

[Rado]

Thanks for fixing it in Safari 14. Now RTL scroll snap doesn't work when embedded inside a RTL scroll snap item, unlike Chrome and FF. Please fix that too. Thanks

[Antoine Quint]

Could you file a dedicated bug for this specific issue, ideally with a test? This would help towards writing a fix. Thank you.