Search code examples
cssios13webkit-overflow-scrolling

ios 13 CSS set -webkit-overflow-scrolling: auto cannot work


I set -webkit-overflow-scrolling: touch in CSS,Then When I scroll the elements, it will randomly jam,I've tried everything I can find,But it didn't work.

I found that ios13 discarded the CSS -webkit-overflow-scrolling: auto Layout and Rendering

This happens when I use Vscode to set -webkit-overflow-scrolling: vscode does not support it

How can I use that property?


Solution

  • They killed it off.

    https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes

    This doesn't explicitly say that killed 'auto' but all signs point to them having done so.

    I'm having nightmare issues with a popup that has a scrollable div inside. If the user 'bounces' it and then scrolls in a particular way it'll scroll the window underneath and then you can't scroll the div until the window has finished scrolling.

    So set 'position: fixed' or something like that (I hear you say). Well I have - in fact I'm using Angular material and the actual scrolling on the underlying window is blocked but iOS seems to still run its physics algorithm even though nothing is animating.

    At least this option used to let the user get less 'bouncy' and hope they'd not trigger this 'bug'.

    --

    There's also a new option that might help with issues caused by auto no longer being available - such as weird scrolling of parent elements as described above. However unfortunately I couldn't get this working with Safari, but it did work in Chrome as expected. And even if this does work it won't help restore the auto behavior if you just prefer the way it works.

    overscroll-behavior: contain;