固定框跳上ipad

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>

這工作100％的罰款在Android和桌面版Chrome，但在我的文本框之間的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>