Html 在Safari中，将鼠标悬停在SVG元素上会导致滚动元素重置其滚动位置？

我有一种奇怪的行为，我不明白。我不知道我是否遇到了错误，或者我可能做错了什么

页面有两个元素，

nav

和

main

，每个元素都有

overflow-y:scroll

设置。这样它们就可以彼此独立地滚动。如果滚动

main

元素，然后将鼠标悬停在底部的分页按钮上，则

main

元素将跳回顶部（失去滚动位置）。如果我将鼠标悬停在右侧导航中的Octocat/GitHub符号上，也会发生这种情况

这里的共同点是分页按钮和右侧的GitHub符号都有

svg

元素。如果我去掉了

svg

元素，那么bug就不会发生。另外，如果我从

main

元素中删除

overflow-y:scroll

，则不会出现错误

我还注意到，这个问题可能与在

标记上设置

高度：100%

有关。删除后，问题不再出现，但不幸的是无法删除，否则全宽/全高布局无法正常工作

---

谁能告诉我为什么会发生这种情况，如果这是Safari中的一个bug，和/或如何修复它？谢谢

您可以通过在定义网格规则的

正文中添加以下内容来解决此问题。可悲的是，我不知道这为什么能解决这个问题

正文{
…
网格自动行：1fr；
}
花了好几个小时在这上面，我唯一能找到解决办法的就是从CSS网格切换到flexbox 这是一个与safari 12.1版相关的错误，safari技术预览版中修复了该错误。

然而，同时作为一种解决办法。
你能试试吗
溢出-x:隐藏，溢出-y:滚动，
特定容器的高度介于50到95vh之间，具体取决于周围的环境因素。悬停时，这将有最小的狩猎跳跃，底部可能是空的。
谢谢！我也不知道为什么这会修复它，但我很乐意在这段时间内解决这个问题！❤️该死，显然这并不能完全解决问题。它似乎在桌面浏览器中解决了这个问题，但由于某些原因，在移动iOS上这个问题仍然存在。事实上，现在我甚至无法在桌面上进行初始修复@BrandonWeiss我无法在移动或桌面Safari上复制它。解决方法似乎适用于右侧导航中的GitHub SVG，但似乎不适用于分页按钮。当您将鼠标移到分页按钮上时，一切正常？结果表明，这似乎是Safari中的一个错误，并且在Safari技术预览中已修复。因此，推测它将在不久的将来推出Safari！