html - 使用鼠标的 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 中用鼠标滚动滚动条应该会捕捉到一个元素。

会发生什么

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

---

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

Answer 1

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