我有一个 website那表现出我不明白的奇怪行为。我无法判断我是否遇到了错误或我可能做错了什么。
页面有两个元素，nav和 main每个人都有overflow-y: scroll放。这样一来，它们就可以彼此独立滚动。如果我滚动 main元素，然后将鼠标悬停在底部的分页按钮上，main元素将跳回顶部(失去其滚动位置)。如果我将鼠标悬停在右侧导航中的 Octocat/GitHub 符号上，也会发生这种情况。
这里的共同点是分页按钮和右侧的 GitHub 符号都有 svg元素。如果我去掉 svg元素错误不会发生。另外，如果我删除 overflow-y: scroll来自 main元素错误不会发生。
我还注意到这个问题可能与 height: 100% 有某种关系设置在 <html> 上标签。删除后问题不再出现，但遗憾的是无法删除，否则全宽/全高布局无法正常工作。
谁能告诉我为什么会这样，如果它是 Safari 中的错误，和/或如何修复它？谢谢!
最佳答案
您可以通过将以下内容添加到定义网格规则的 body 来解决此问题。遗憾的是，我不知道为什么这可以解决问题。
body {
…
grid-auto-rows: 1fr;
}
关于html - 在 Safari 中，将鼠标悬停在 SVG 元素上会导致滚动元素重置其滚动位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55268747/