在移動Safari瀏覽器網站上固定標題與文本字段

我一直在尋找一段時間，我似乎無法找到任何解決此問題。當移動Safari瀏覽器中的輸入字段獲得焦點時（未檢查其他瀏覽器），由於Safari將該元素放在視圖中（靠近中心），固定元素將跳轉。該錯誤只發生在用戶滾動時，如果用戶仍然在頁面頂部什麼都沒有發生。在移動Safari瀏覽器網站上固定標題與文本字段

&之前之後的截圖

before focus

after focus

有沒有人有一個線索，如何解決這一問題？我遇到的唯一解決方案是在重點時回滾到頂部，然後模糊滾動回到位置......這似乎是一個非常草率的解決方案。

下面是截圖中的示例站點，非常基本，沒有超出規範。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, scale=1"/> 
    <title>MySite</title> 
    <style> 
    body{ 
     height:100%; 
     width:100%; 
     padding:0; 
     margin:0; 
     font-size:16px; 
     font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    } 
    header, footer { 
     background-color:#333; 
     padding:10px; 
     color:#FFF; 
     width:100%; 
    } 
    header { 
     position:fixed; 
     top:0; 
     left:0; 

    } 
    input[type=search] { 
     position:relative; 
     margin-left:20px; 
     width:160px; 
     font-size:16px; 
     height:26px; 
    } 
    section{ 
     padding:10px; 
    } 
    </style> 
</head> 
<body> 
<header> 
<b>MySite</b> 
<input type='search' placeholder='Search'> 
</header> 
<section> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</sction> 
<footer> 
&copy; MySite <?php echo date('Y') ?> 
</footer> 
</body> 
</html>

來源

2012-11-17 Ian

http://stackoverflow.com/questions/7970389/ios-5-fixed-positioning-and-virtual-keyboard – Petah

這些都是相當sl solutions的解決方案，並且在我的iOS模擬器中，頂級的解決方案根本不起作用。 – Ian

我有同樣的問題。但是我意識到，固定職位只是延遲了，並沒有被打破（至少對我而言）。滾動並等待5-10秒，看看搜索欄是否調整回屏幕的頂部。我相信這不是錯誤，而是鍵盤打開時的延遲響應。

來源

2013-06-24 21:17:07 Philip

在移動Safari瀏覽器網站上固定標題與文本字段

回答

相關問題