消失的位置ios7移動Safari中的固定標題

我一直在搞這個，看起來無法找到解決辦法。消失的位置ios7移動Safari中的固定標題

我有一個簡單的UL充當固定頭與下面的CSS：

body { 
    width: 100%; 
    height: 100%; 
    min-height: 100%;  
} 

.stream .header { 
    position: fixed; 
    width: 100%; 
    height: 41px; 
    top: 0; 
    right: 0; 
    left: 0; 
    z-index: 10; 
    margin-bottom: 10px; 
    list-style: none; 
    }

標題下面的內容下面的CSS：

.stream .stream-content { 
    position: relative; 
    padding-top: 41px; 
    -webkit-transform: translate3d(0, 0, 0); 
}

當頁滾動在ios7移動Safari瀏覽器，會發生以下情況：

第一向下滾動 - 標題隨頁面頂部移動一直移動，直到滾動完成。
第二次向下滾動 - 標題完全消失，滾動完成時不會再次出現。
向上滾動（標題仍然可見） - 標題完全消失，並且在達到頁面頂部時不會再次出現。
向上滾動（標題隱藏） - 標題保持隱藏狀態，並且在達到頁面頂部時不會再次出現。
向上滾動（已在頁面頂部，標題隱藏） - 標題重新出現並正常運行，直到頁面向下滾動兩次。

我沒有iOS6移動Safari瀏覽器的這個問題，所以這個問題似乎與新的url欄有關滾動調整大小。

其他人有類似的問題？建議歡迎。

更新：

這樣看來，在標題的父（.stream）去除-webkit-的Transform3D（）刪除了這些問題，所以必須有一個衝突父DIV呈現的方式頭裏面。

儘管如此，仍在尋找工作。

來源

2013-10-11 fscof

我有同樣的問題，它似乎是一個錯誤發生在頁面內部發生太多時，我可以通過將以下轉換代碼添加到固定位置元素來修復它（transform: translateZ(0);-webkit-transform: translateZ(0); ），強制瀏覽器使用硬件加速來訪問設備的圖形處理單元（GPU）以使像素飛行。另一方面，Web應用程序運行在瀏覽器的上下文中，這使得軟件可以執行大部分（如果不是全部）渲染，從而導致轉換的功率減少。但是網絡一直在追趕，大多數瀏覽器廠商現在都通過特定的CSS規則來提供圖形硬件加速。

使用-webkit-transform：translate3d（0,0,0）;將啓動GPU進行CSS轉換，使其更平滑（更高的FPS）。

注意： translate3d（0,0,0）根據所看到的內容不做任何事情。它將對象在x，y和z軸上移動0px。這只是一種強制硬件加速的技術。

#header { 
    position: fixed; 
    /* MAGIC HAPPENS HERE */ 
    transform: translateZ(0); 
    -moz-transform: translatez(0); 
    -ms-transform: translatez(0); 
    -o-transform: translatez(0); 
    -webkit-transform: translateZ(0); 
    -webkit-font-smoothing: antialiased; /* seems to do the same in Safari */ 
}

來源

2014-09-18 23:21:22 Neo

謝謝 - 當我正在處理這個問題時，得出了同樣的結論。有點相關，這裏有更多關於移動safari中position abs和transform translate性能權衡的細節：http://stackoverflow.com/questions/11100747/css-translation-vs-changing-absolute-positioning-values/18516653#18516653 – fscof

-2

我面臨着與iPad相同的問題。我嘗試在JS部分添加iPad的代碼，如下所示：

if(navigator.userAgent.match(/iPad/i)) { 
    //written code to scrolldown the header part 
}

它對我有用。

來源

2016-10-24 06:21:31 mounika

消失的位置ios7移動Safari中的固定標題

回答

相關問題