Interia / momentum scrolling

[steveduffin]

Expected Behaviour

iOS 11 introduced inertia scrolling to safari, which makes scrolling interaction feel buttery smooth. See this video demo of the difference (30 secs mark) https://www.youtube.com/watch?time_continue=31&v=dRPGdhwAXck.

Test here (view on iOS 11) https://codepen.io/chriscoyier/pen/nHEDj

This motion should apply to all scrolling interactions.

Current Behaviour

Interia scrolling is set by default at the root level but not on any elements receiving an overflow:scroll. Therefore, anytime we set this prop on a selector, we should be applying the following property to ensure native scrolling is applied in the new scrolling context. -webkit-overflow-scrolling: touch;

See https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

Apple Office referance: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling

Attempted Fixes

We have applied it specifically to the c-overlay (https://github.com/sky-uk/toolkit/blob/develop/packages/sky-toolkit-ui/components/_overlay.scss#L94) and suggested it for c-modal and u-overflow-x-scroll. Really we should look to apply this constantly with a mixin, which will also allow us to adapt to any changes in this (currently) proprietary spec and future support for other browsers.

Context

Raised after discussing on https://github.com/sky-uk/toolkit/pull/326

Your Environment

• Version used:
• iPhone X running 11.1