修复了 ipad 上的 Box 跳转

Question

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

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>

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

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>