Friday 22 October 2021

Safari browser is loosing scroll position when changing scroll-snap-type or scroll-snap-align

No matter if I change the scroll-snap-type or the scroll-snap-align, Safari looses the scroll position and starts from first scroll-snap element. This problem can be easily reproduced in the scroll example here: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type. Just switch to scroll-snap-type: mandatory, scroll to 2nd or 3rd element. Then switch to scroll-snap-type: none and back again to scroll-snap-type: mandatory. In all browsers the scroll position stays the same, in Safari it starts again from 0.

Why do I need this? I am using a scroll animation that changes the scrollTop position. When using scroll-snap in Safari the animation does not work e.g. when click on a navigation link to scroll to another section. So my idea was to turn scroll-snap off when using a navigation link and turn it on again when done. Works fine in all browsers, leads to described problem in Safari. I also tried to change the scroll-snap-align instead, but its the same.

Did someone experience the same problem? Did you find a workaround / solution?



from Safari browser is loosing scroll position when changing scroll-snap-type or scroll-snap-align

No comments:

Post a Comment