CSS scroll snap with mouse does not work in Safari but works in Firefox and Chrome

Question

Here's a simple scroll snap demo:

.scroll {
  border: 2px solid black;
  width: 150px;
  height: 150px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  display: flex;
}

.item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  box-sizing: border-box;
  border: 2px solid red;
  font-size: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="scroll">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

What I expect to happen

Scrolling the scrollbar with the mouse in desktop Safari should snap to an item.

What happens

Scroll snap has no effect in Safari but works in Firefox and Chrome. But it does work in Safari if I scroll with the trackpad.

---

This seems like such a simple issue and I feel silly for resorting to asking such a trivial question on Stackoverflow, but I've been googling for the past 30 mins and I can't seem to find anyone else with the same issue or some documentation that explains this behavior. Even WebKit's scroll snap demo page does not indicate that it should only work on iOS or with the trackpad; why don't they mention this? Am I missing something?

Answer 1

This is an already fixed bug: https://bugs.webkit.org/show_bug.cgi?id=146696