我有一个website，表现出我不理解的奇怪行为。我无法确定我是否遇到了错误或我可能做错了什么。
页面有两个元素nav和main，每个元素都设置了overflow-y: scroll。这样，它们就可以彼此独立地滚动。如果滚动main元素，然后将鼠标悬停在底部的分页按钮上，则main元素将跳回到顶部（失去其滚动位置）。如果我将鼠标悬停在右侧导航栏中的Octocat / GitHub符号上，也会发生这种情况。
这里的共同点是，分页按钮和右侧的GitHub符号都具有svg元素。如果我摆脱了svg元素，就不会发生该错误。另外，如果我从overflow-y: scroll元素中删除了main，则不会发生该错误。
我还注意到，该问题可能与在height: 100%标记上设置<html>有关。删除后，该问题不再发生，但是很遗憾，无法删除，否则整个宽度/高度布局将无法正常工作。
谁能告诉我为什么会这样，如果是Safari中的错误，和/或如何解决？谢谢！
答案 0 :(得分：1)
您可以通过在定义网格规则的body中添加以下内容来解决此问题。可悲的是，我不知道为什么这可以解决问题。
body {
…
grid-auto-rows: 1fr;
}
答案 1 :(得分：0)
花了数小时的时间之后，我唯一能弄清楚如何解决它的方法是从CSS网格切换到flexbox。 ♂️
如果您好奇的话，这就是diff that fixed it。
答案 2 :(得分：0)
这是与Safari版本12.1有关的错误，该错误已在Safari技术预览中修复。 https://bugs.webkit.org/show_bug.cgi?id=197189
但是，这是同时的解决方法。 你能试一下吗 溢出-x：隐藏，溢出-y：滚动， 特定容器的高度介于50到95vh之间，具体取决于您周围的元素。这将使Safari在悬停时跳得最少，并且底部可能没有空。