Html 选择：在网格区域内悬停并溢出：滚动使Safari跳到顶部

所以我有一个很奇怪的问题，我就是无法控制自己。如果在Safari中运行代码段，您可以看到，只要将鼠标悬停在

select

字段上，

.page

div就会滚动到顶部

只有当

.page

是网格的一部分并且您有

选择：悬停

规则时，才会发生这种情况。如果只是约束高度而不在栅格中，则不会发生这种情况

也许有人能给我一个提示，说明为什么会发生这种情况

PS：在Chrome和Firefox中，这一切都很好

.site{
显示：网格；
网格模板区域：“边栏标题”“边栏页面”；
网格模板列：自动1fr；
网格模板行：60px 1fr；
高度：200px；
}
旁白{
网格区域：侧栏；
背景色：#E3；
颜色：透明；
}
标题{
网格区域：标题；
背景色：#中交；
颜色：透明；
}
.第页{
网格区域：页面；
溢出：滚动；
背景色：#fff；
}
.垫片{
填充：100px0；
}
选择：悬停{
颜色：红色；
}

边栏
标题
向下滚动。。。
将鼠标悬停在“选择”按钮上
值1
价值2
价值3
更多内容。。。

好的，现在我已经解决了，所以我希望我能在这方面帮助其他人

解决方案 在

.page

div上设置

max height:100%

时，一切正常。比较Safari中的代码片段，看看它是否正常工作

.site{
显示：网格；
网格模板区域：“边栏标题”“边栏页面”；
网格模板列：自动1fr；
网格模板行：60px 1fr；
高度：200px；
}
旁白{
网格区域：侧栏；
背景色：#E3；
颜色：透明；
}
标题{
网格区域：标题；
背景色：#中交；
颜色：透明；
}
.第页{
网格区域：页面；
溢出：滚动；
最大高度：100%；
背景色：#fff；
}
.垫片{
填充：100px0；
}
选择：悬停{
颜色：红色；
}

边栏
标题
向下滚动。。。
将鼠标悬停在“选择”按钮上
值1
价值2
价值3
更多内容。。。

如果将来有人偶然发现这个问题，并发现发布的修复程序对他们不起作用，我建议查看这个答案，它对我非常有效：

（在我的例子中，滚动到顶部发生在任何焦点事件上-按钮、文本输入等…）