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的滚动快照演示页面也没有表明它只能在iOS或触控板上使用；他们为什么不提这个？我是不是错过了什么？

Answer 1

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