css - select:将鼠标悬停在带有溢出的网格区域内:滚动导致Safari跳到顶部

所以我有一个非常奇怪的问题，我无法解决这个问题。如果您在Safari中运行该代码段，则可以看到，只要将鼠标悬停在select字段上，.page div就会滚动到顶部。

仅当.page是网格的一部分并且您具有select:hover规则时，才会发生这种情况。当您仅在不限制网格的情况下限制高度时，不会发生这种情况。

也许有人可以给我提示为什么会这样。

PS：在Chrome和Firefox中，这很好用。

.site {
  display: grid;
  grid-template-areas: "sidebar header""sidebar page";
  grid-template-columns: auto 1fr;
  grid-template-rows: 60px 1fr;
  height: 200px;
}

aside {
  grid-area: sidebar;
  background-color: #e3e3e3;
  color: transparent;
}

header {
  grid-area: header;
  background-color: #cccccc;
  color: transparent;
}

.page {
  grid-area: page;
  overflow: scroll;
  background-color: #fff;
}

.spacer {
  padding: 100px 0;
}

select:hover {
  color: red;
}

<div class="site">

  <aside>
    Sidebar
  </aside>

  <header>
    Header
  </header>

  <main class="page">
    <div class="spacer">Scroll down...</div>
    <label for="test">Hover the select</label>
    <select name="test" id="test">
      <option value="1">Value 1</option>
      <option value="2">Value 2</option>
      <option value="2">Value 3</option>
    </select>
    <div class="spacer">More content...</div>
  </main>

</div>

最佳答案

好的，所以我暂时解决了这个问题，希望我可以帮助其他人。

解

在max-height: 100% div上设置.page时，一切都会按预期进行。比较Safari中的代码片段以查看其工作原理。

.site {
  display: grid;
  grid-template-areas: "sidebar header""sidebar page";
  grid-template-columns: auto 1fr;
  grid-template-rows: 60px 1fr;
  height: 200px;
}

aside {
  grid-area: sidebar;
  background-color: #e3e3e3;
  color: transparent;
}

header {
  grid-area: header;
  background-color: #cccccc;
  color: transparent;
}

.page {
  grid-area: page;
  overflow: scroll;
  max-height: 100%;
  background-color: #fff;
}

.spacer {
  padding: 100px 0;
}

select:hover {
  color: red;
}

<div class="site">

  <aside>
    Sidebar
  </aside>

  <header>
    Header
  </header>

  <main class="page">
    <div class="spacer">Scroll down...</div>
    <label for="test">Hover the select</label>
    <select name="test" id="test">
      <option value="1">Value 1</option>
      <option value="2">Value 2</option>
      <option value="2">Value 3</option>
    </select>
    <div class="spacer">More content...</div>
  </main>

</div>

.site {
  display: grid;
  grid-template-areas: "sidebar header""sidebar page";
  grid-template-columns: auto 1fr;
  grid-template-rows: 60px 1fr;
  height: 200px;
}

aside {
  grid-area: sidebar;
  background-color: #e3e3e3;
  color: transparent;
}

header {
  grid-area: header;
  background-color: #cccccc;
  color: transparent;
}

.page {
  grid-area: page;
  overflow: scroll;
  background-color: #fff;
}

.spacer {
  padding: 100px 0;
}

select:hover {
  color: red;
}

<div class="site">

  <aside>
    Sidebar
  </aside>

  <header>
    Header
  </header>

  <main class="page">
    <div class="spacer">Scroll down...</div>
    <label for="test">Hover the select</label>
    <select name="test" id="test">
      <option value="1">Value 1</option>
      <option value="2">Value 2</option>
      <option value="2">Value 3</option>
    </select>
    <div class="spacer">More content...</div>
  </main>

</div>

关于css - select:将鼠标悬停在带有溢出的网格区域内:滚动导致Safari跳到顶部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57747423/