位置：当显示标签栏时，固定“hitboxes”在大尺寸手机上的 iOS 10 Safari 中向上移动

Posted 2023-03-12

【中文标题】位置：当显示标签栏时，固定“hitboxes”在大尺寸手机上的 iOS 10 Safari 中向上移动

【英文标题】：position:fixed "hitboxes" move up in iOS 10 Safari on Plus-sized phones when tab bar is shown

【发布时间】：2016-11-08 21:32:58

【问题描述】：

我有一个 div 用作叠加层；我正在使用position: fixed 来完成此操作。在叠加层中，我有一个按钮。通常，这可以完美运行，但我们发现了一个非常奇怪的错误，该错误似乎存在于 Plus 尺寸 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>

复制步骤

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

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

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

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

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

有什么想法吗？

【问题讨论】：

听起来 Safari 在第一次旋转到横向时没有正确更新包含块的位置。并不惊讶。

虽然这不仅仅是第一次，因为如前所述，多次来回旋转会将 hitbox 向上移动到按钮的高度，次数与来回旋转的次数一样多。

因此在切换到横向时它根本不会更新包含块的位置。它是否与纵向视图中的标签栏正确定位？它是否在没有标签栏的任一/两个视图中正确定位？

可能相关：***.com/questions/4889601/… 和 ***.com/questions/29894997/…

尝试绝对位置：绝对并将 div 作为直接子级附加到父级

【参考方案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>