Doesn't work with Safari CSS Scroll Snap

[riccardolardi]

Breaks in latest Safari if html or body element is set to scroll-snap-type: y mandatory;

[minseolee]

I did not set html or body element scroll-snap-type And scroll snap does not work properly only at 'mobile safari' iOS: 14.4.1 / React.js Did anyone solved this problem?

[MarkVasile]

Strange hack, but it works: disabling the scroll-snap before scrolling, then re-enabling and also calling scrollIntoView(). Note: I am scrolling a few slides, which are \<li> items here, please adjust according to your needs. Note: I am using two polyfills: 'css-scroll-snap-polyfill' and 'smoothscroll-polyfill'.

Also, I don't know why it's necessary to set scrollSnapType on both 'body' and 'html' (I only have it on in the css file), but I couldn't get it to work with only one setting.

      const prop = {
        behavior: 'smooth',
        block: 'start',
        top: slides[index].offsetTop,
      }
      document.body.style.scrollSnapType = 'none'
      document.getElementsByTagName('html')[0].style.scrollSnapType = 'none'
      window.scrollTo(prop)
      setTimeout(() => {
        document.body.style.scrollSnapType = 'y mandatory'
        document.getElementsByTagName('html')[0].style.scrollSnapType = 'y mandatory'
        document.getElementsByTagName('li')[index].scrollIntoView()
      }, 500)

[artturipi]

On Mac, Safari version 14.0.3. smoothscroll works fine with scroll snap at least for element. I'm not sure which version @riccardolardi is talking about as latest, but I'd assume it's version 13.x.x. However, I still had this issue with iOS Safari version 15.3.1. After updating to 15.4.1. today, the issue disappeared.

I tried to apply @MarkVasile workaround because of this issue on iOS. However it did not work for me for safari 14.0.3. The symptom was that after timeout, the scroll would snap to the beginning of the container element, which obviously is bad. I tried some fixes like disabling scroll by setting overflow: hidden or setting the scroll position again after adjusting scrollSnapType to mandatory but that was glitchy and unreliable. Moral of the story: if you've used this workaround, it might be a good idea to either stop using it or checking for Safari version numbers and only applying it to some range of versions. I'm not sure how you'd go about figuring out the exact version range to apply the fix, though...