位置：固定在显示中：Safari 上的网格

如何解决位置：固定在显示中：Safari 上的网格

我不是专业的网络开发人员，所以我提前为我可能正在做的任何非正统的事情道歉（而且我有兴趣了解更多惯用的方法来实现我的目标）。

我正在尝试为移动屏幕制作一个布局，其中菜单（导航等）被放置为 100vw×100vh 块，根据复选框滑入和滑出视图；该方法感觉有点hackish，但它运行得相当好并且不需要JavaScript。

我花了几个小时来调试一个令人沮丧的定位错误，它只发生在特定浏览器上；虽然我找到了一种解决方法，但我想知道这是否是一个合法的错误，或者我是否遇到了某种“未定义的行为”领域，并且浏览器完全有权做任何事情。

这是一个简化的页面，带有我喜欢使用的 CSS：

body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto 1fr;
  min-height: 100vh;
  margin: 0;
}

header.banner {
  grid-column: 1;
  grid-row: 1 / 3;
  background: red;
}

header.menu1 {
  grid-column: 2;
  grid-row: 1;
  background: blue;
}

header.menu2 {
  grid-column: 2;
  grid-row: 2;
  background: green;
}

main {
  grid-column: 1 / -1;
  grid-row: 3;
  background: yellow;
}

.togglable {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 1fr;
  grid-template-rows: 2rem;
  align-items: center;
}

.togglable>input {
  /* In the actual page,I set the input's opacity to 0 and put an img
     * over it,hence the position: absolute. */
  position: absolute;
  width: 2rem;
  height: 2rem;
  margin: 0;
}

.togglable>label {
  grid-column: 2;
}

.togglable>input:checked {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 42;
}

.togglable>.woosh {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: #dddd;
  top: 0;
  left: 0;
  transform-origin: left;
  transform: translate(-100vw);
  transition: transform 0.5s;
  z-index: 41;
}

.togglable>input:checked~.woosh {
  transform: none;
}

<header class="banner"></header>
<header class="menu1 togglable">
  <input type="checkbox" id="menu1">
  <label for="menu1">Menu1</label>
  <div class="woosh">hi</div>
</header>
<header class="menu2 togglable">
  <input type="checkbox" id="menu2">
  <label for="menu2">Menu2</label>
  <div class="woosh">hi</div>
</header>
<main>
  Main content.
</main>

这是它的样子：

用户点击一个复选框； .woosh 兄弟 div 滑入，输入移动到右上角：

用户再次点击复选框； div 滑出。在最终版本中，复选框的不透明度设置为零，图像位于其下方；一切都很美好。

除了……在 Safari 上？当它被选中时，输入在一些看似随机的地方移动，显然不是在右上角：

我不知道 Safari 在这里遵循什么逻辑。 Firefox (84) 和 Chromium (87) 似乎都符合我的意思（至少在其桌面版本的移动视图模拟器上）。此故障发生在 iOS 12.1.2 上；我不是设备的所有者，因此尝试升级系统不是我的特权。

我提到的解决方法包括删除 display: grid 中的 .togglable。需要一些胶带才能使事情看起来相同（更多position: absolute，一些margin-left和min-height；如果我想例如制作第一个菜单的按钮，情况会变得更糟比第二个小，右对齐 <input>，同时左对齐 <label>)，但它有点工作。

我意识到 JS 可以为我省去一些痛苦；即使不去那里，也许单选按钮会更好地为我服务（因为我不必移动 <input>）；即便如此，我也想

• 这是一个 Safari 错误，或者
• 我对 CSS 的理解是错误的。

不管是什么，我都很想知道发生了什么。