CSS問題的位置：在橫向模式下固定的iOS 9 iPhone 6+

我發現了一個奇怪的問題在以下條件下我固定頭：CSS問題的位置：在橫向模式下固定的iOS 9 iPhone 6+

iPhone 6+，風景模式
野生動物園，在至少有兩個標籤頁中打開
我的頁面有一個位置是：固定頭和主體和HTML與地位：相對的，身高：100％

頁面加載後和向下滾動時，所有的作品好，頭球到位和網絡啓發埃克特正確地顯示它：

但是，當你向上滾動，拉動向下翻頁，屏幕和釋放，頭仍然是在頁面上可見，但實際上它是視下方某處移動（看到web檢查員沒有突出顯示它）。

這一事實導致所有頭元素是不可訪問：不能打開菜單，點擊標識，或接觸按鈕。

頭恢復到正常的時候：

向下滾動（但是當你滾動再度回升突破）
切換到另一個選項卡，然後回到
或關閉其他標籤

我嘗試更改標頭和正文的DOM或/和CSS，但沒有將標題恢復到正常狀態。

有關如何修復它的任何想法？

來源

2016-02-22 Grin

我們可以得到一個小提琴或更好，但一個活生生的例子，我們可以調試？ –

我很抱歉成爲壞消息的使者，但我不知道你的實際問題是什麼，因爲你沒有發佈實際的代碼。但是，我猜想，因爲你的問題是position:fixed，解決它的最好方法是停止使用position:fixed，因爲它似乎不適合你。下面是你可以只使用絕對和相對定位同樣光滑地效仿：

<html id="eHTML"> 
 
<style> 
 
#eHTML { position: static } 
 
#eBODY { position: relative; overflow:hidden } 
 
#eHTML, #eBODY, #main { width: 100%; height: 100%; margin: 0; top: 0 } 
 
#eBODY>div { position:absolute; left:0;bottom:0 } 
 
#footer {height: 20%;background-color:#88f;width:calc(100% - 14px)/*to account in for 14px scrollbar*/;overflow:hidden} 
 
#main {background-color:#ff8;width:100%;height:100%;overflow:auto} 
 
</style> 
 
<body id=eBODY> 
 
<div id=main> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
 
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> 
 
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p> 
 
<p>totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
 
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p> 
 
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,</p> 
 
<p>sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p> 
 
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p> 
 
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,</p> 
 
<p>vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> 
 
<br /><br /><br /><br /> 
 
</div> 
 
<div id="footer"> 
 
Some Random Fixed<br /> 
 
Content! Yay, it workz! 
 
</div> 
 
</body> 
 
</html>

來源

2017-05-24 05:33:04

CSS問題的位置：在橫向模式下固定的iOS 9 iPhone 6+

回答

相關問題