在 Safari 中，悬停在 SVG 元素上会导致滚动元素重置其滚动位置？答案

【问题标题】：In Safari, hovering over SVG elements causes a scrolled element to reset its scroll position?在 Safari 中，悬停在 SVG 元素上会导致滚动元素重置其滚动位置？
【发布时间】：2019-08-11 14:50:18
【问题描述】：

我有一个 website 表现出我不理解的奇怪行为。我无法判断我是否遇到了错误或我可能做错了什么。

页面有两个元素，nav 和 main，每个元素都设置了 overflow-y: scroll。这样它们就可以相互独立地滚动。如果我滚动 main 元素，然后将鼠标悬停在底部的分页按钮上，main 元素将跳回顶部（失去其滚动位置）。如果我将鼠标悬停在右侧导航中的 Octocat/GitHub 符号上，也会发生这种情况。

这里的共同点是分页按钮和右侧的 GitHub 符号都有svg 元素。如果我去掉 svg 元素，这个错误就不会发生。此外，如果我从 main 元素中删除 overflow-y: scroll，则不会发生错误。

我还注意到这个问题可能与在<html> 标签上设置了height: 100% 有关。删除后问题不再出现，但遗憾的是无法删除，否则全宽/高布局无法正常工作。

谁能告诉我为什么会这样，如果它是 Safari 中的错误，和/或如何修复它？谢谢！

【问题讨论】：

事实证明，这似乎是 Safari 中的一个错误，并且已在 Safari 技术预览版中修复。所以大概它会在不久的将来推广到 Safari！ bugs.webkit.org/show_bug.cgi?id=197189

标签： html css svg browser safari

【解决方案1】：

您可以通过将以下内容添加到定义网格规则的body 来解决此问题。可悲的是，我不知道为什么这可以解决问题。

body {
  …
  grid-auto-rows: 1fr;
}

【讨论】：

谢谢！我也不知道为什么这会解决它，但我很乐意同时采用这个解决方法！ ❤️
该死，显然这并不能完全解决它。它似乎在桌面浏览器中修复了它，但由于某种原因在移动 iOS 上问题仍然存在。 ?
实际上，现在我什至无法在桌面上进行初始修复。 ? 它最初似乎确实有效……
@BrandonWeiss 我无法在移动或桌面 Safari 上复制它。
解决方法似乎适用于右侧导航中的 GitHub SVG，但似乎不适用于分页按钮。当您将鼠标悬停在分页按钮上时，一切正常吗？

【解决方案2】：

在花了好几个小时之后，我能弄清楚如何解决它的唯一方法就是从 CSS 网格切换到 flexbox。 ??‍♂️

这是diff that fixed it，如果你好奇的话。

【讨论】：

【解决方案3】：

这是与 Safari 版本 12.1 相关的错误，已在 Safari 技术预览版中修复。 https://bugs.webkit.org/show_bug.cgi?id=197189

但同时作为一种解决方法。你能试一下吗溢出-x：隐藏，溢出-y：滚动，根据您周围的元素，特定容器的高度在 50 到 95vh 之间。这将在悬停时进行最少的 Safari 跳跃，并且底部可能有空白空间。

【讨论】：