Question

我注意到使用iPad在我的网站上出现了一些奇怪的行为。我把它缩小到固定位置的汽车保证金。例如：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

这在Android和桌面上的Chrome中效果非常好，但是在我的iPad上，在文本框之间切换会导致框跳转到＃39;它似乎。它在视觉上非常分散注意力，并且在某些情况下会导致盒子在屏幕上生成。这是一个容易修复的已知问题吗？

Answer 1

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

＆＃13;

<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>

＆＃13;

固定盒子在ipad上跳跃

1 个答案: