使用鼠标的 CSS 滚动捕捉在 Safari 中不起作用，但在 Firefox 和 Chrome 中有效

Question

这是一个简单的滚动快照演示：

.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>

我预计会发生什么

在桌面 Safari 中用鼠标滚动滚动条应该会捕捉到一个项目。

会发生什么

滚动捕捉在 Safari 中无效，但在 Firefox 和 Chrome 中有效。但如果我使用触控板滚动，它确实可以在 Safari 中使用。

---

这似乎是一个如此简单的问题，我觉得在 Stackoverflow 上提出这样一个微不足道的问题很愚蠢，但过去 30 分钟我一直在谷歌上搜索，似乎找不到其他人有同样的问题或一些解释此行为的文档。甚至 WebKit 的滚动捕捉 demo page 也并不表示它应该只适用于 iOS 或触控板；他们为什么不提这个？我错过了什么吗？

Answer 1

这是一个已经修复的错误：https://bugs.webkit.org/show_bug.cgi?id=146696