css - 固定盒子在 ipad 上跳转

Question

我注意到使用 iPad 时我的网站出现了一些奇怪的行为。我已将其缩小到固定位置自动 margin 。例如:

box{
    display:block;
    border:thin solid black;
    background:yellow;
    position:fixed;
    width:90%;
    height:50%;
    margin:auto auto;

    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}

<box>
    <input/><br/>
    <input/><br/>
</box>

<div style="height:800%; background:blue;">
</div>

这在安卓和桌面上的 chrome 中 100% 正常，但在我的 iPad 上，在文本框之间切换会导致文本框看起来“跳跃”。这在视觉上非常分散注意力，在某些情况下会导致方 block 在屏幕下方生成。这是一个容易修复的已知问题吗？

Answer 1

将 max-width 设置为可能导致跳转的输入，因为其中未指定宽度。

<style>
box{
    display:block;
    border:thin solid black;
    background:yellow;
    position:fixed;
    width:90%;
    height:50%;
    margin:auto auto;

    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}
  input{
    max-width: calc(100% - 4px);
  }
</style>


<box>
    <input/><br/>
    <input/><br/>
</box>

<div style="height:800%; background:blue;">
</div>