Bug 241737 - Small programmatic scrolls with scroll snap don't scroll in WebKit
Summary: Small programmatic scrolls with scroll snap don't scroll in WebKit
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Scrolling (show other bugs)
Version: Safari 15
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL: https://www.eightyone.co.nz/projects/...
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-06-17 18:26 PDT by Emory Fierlinger
Modified: 2022-06-20 11:10 PDT (History)
5 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Emory Fierlinger 2022-06-17 18:26:40 PDT
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 = '';
});
Comment 1 Radar WebKit Bug Importer 2022-06-20 02:29:07 PDT
<rdar://problem/95524733>
Comment 2 Antoine Quint 2022-06-20 02:31:15 PDT
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?
Comment 3 Simon Fraser (smfr) 2022-06-20 11:09:39 PDT
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.
Comment 4 Simon Fraser (smfr) 2022-06-20 11:10:54 PDT
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.