Small programmatic scrolls with scroll snap don't scroll in WebKit

[Emory Fierlinger]

I have a dynamic horizontal slider on a website, half way down this page: https://www.eightyone.co.nz/projects/safe-night-a-thon

When a user hovers over the left/right arrows, the browser is supposed to slowly move them along the slider. This works in both Chrome and Firefox, but not Webkit/Safari.

After talking with Apple engineers at WWDC22, they have diagnosed this as a Webkit bug, and have told me to file it as such here. Here is the code:

var amount = '';

function scroll() {
  $('#horizontal-scroll-parent').animate({
    scrollLeft: amount
  }, 25, 'linear', function() {
    if (amount != '') {
      scroll();
    }
  });
}
$('#next').hover(function() {
  amount = '+=25';
  scroll();
}, function() {
  amount = '';
});
$('#back').hover(function() {
  amount = '-=25';
  scroll();
}, function() {
  amount = '';
});

[Radar WebKit Bug Importer]

<rdar://problem/95524733>

[Antoine Quint]

What does the scroll function do in your code example? Is it actually performing scrolling by calling something like scrollTo() or changing some CSS properties to affect where things are positioned and simulate scrolling?

[Simon Fraser (smfr)]

I think the page is doing small programmatic scrolls; in WebKit these end up snapping back to the nearest snap point, but in other browsers they are allowed to scroll.

[Simon Fraser (smfr)]

The spec <https://drafts.csswg.org/css-scroll-snap/#overview> says "author can request a particular bias for the scrollport to land on a snap position after scrolling operations (including programmatic scrolls such as the scrollTo() method)." so we should investigate to see if WebKit is correct, or other browsers are correct.