html - 位置 :fixed "hitboxes" move up in iOS 10 Safari on Plus-sized phones when tab bar is shown

Question

我有一个用作覆盖层的 div；我正在使用 position: fixed 来完成这个。在叠加层中，我有一个按钮。通常情况下，这可以完美运行，但我们发现了一个非常奇怪的错误，该错误似乎出现在加大尺寸 iPhone 上的 iOS 10 中的 Safari 中。

<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 50px; background: rgba(0, 0, 0, 0.25);">

    <input type="button" value="Input Button" />
    <button>Button</button>

</div>

<div>

  This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />

  <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 50px; background: rgba(0, 0, 0, 0.25);">

    <input type="button" value="Input Button" />
    <button class="pull-right">Button</button>

  </div>

</div>

重现步骤

1. 确认 Safari 中的标签栏已启用。
2. 至少打开 2 个标签页。
3. 在纵向模式下，加载有问题的页面，position: fixed div 可见。
4. 将手机旋转到横向。

Safari 现在应该在屏幕顶部、地址栏下方显示选项卡栏。但是如果您尝试按下按钮，它不会做任何事情。相反，您必须按下按钮上方(更具体地说，大约是按钮上方按钮的高度)，Safari 会像您现在按下按钮一样。

澄清:在纵向模式下，标签栏不显示，即使启用标签栏设置也是如此；它仅在您旋转到横向后显示，这是 DOM 或页面的某些渲染在 Safari 中“不同步”的地方。

更奇怪的是，如果您再次将设备旋转回纵向并再次横向旋转(在上面的步骤 1 到 4 之后)，按钮的“hitbox”将再次垂直移动，这意味着现在您必须按按钮上方大约是按钮向上高度的两倍。

这发生在 iOS 10.1.1 上，但我不确定其他版本。在 iPhone 7 Plus 和 6S Plus 上均得到确认。我确实找到了 this webkit bug这似乎密切相关但可能不同。

有什么想法吗？

Answer 1

我们遇到了类似的问题，并通过使用 transform:translate3d(0,0,0) 添加包装器解决了这个问题。

所以，你最终会得到这样的结果:

<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 50px; background: rgba(0, 0, 0, 0.25);">
    <div style="transform: translate3d(0,0,0);">
        <input type="button" value="Input Button" />
        <button>Button</button>
    </div>