我目前正在使用Twitter Bootstrap開發一個響應式網站。該網站在移動設備/平板電腦/桌面上具有全屏背景圖片。這些圖像使用兩個div旋轉并逐漸淡入。除了一個問題，它幾乎是完美的。使用iOS Safari，Android瀏覽器或Android上的Chrome，當用戶向下滾動頁面并導致地址欄隱藏時，背景會略微跳動。該站點位于：http : //lt2.daveclarke.me/在移動設備上訪問它并向下滾動，您應該會看到圖像調整大小/移動。我用于后臺DIV的代碼如下：#bg1 { background-color: #3d3d3f; background-repeat:no-repeat; background-attachment:fixed; background-position:center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position:fixed; width:100%; height:100%; left:0px; top:0px; z-index:-1; display:none;}歡迎所有建議-這已經讓我有一段時間了！
3 回答
吃雞游戲
TA貢獻1829條經驗 獲得超7個贊
我發現Jason的答案對我而言并不奏效，而且我仍在不斷進步。Javascript確保頁面頂部沒有空隙，但是每當地址欄消失/重新出現時，背景仍然在跳躍。因此，除了Javascript修復程序之外，我還適用transition: height 999999s于div。這將創建一個持續時間很長的過渡，以至于實際上凍結了元素。
烙印99
TA貢獻1829條經驗 獲得超13個贊
我的網站標題上也有類似的問題。
html, body {
height:100%;
}
.header {
height:100%;
}
這最終會在android chrome上產生跳躍式滾動體驗，因為在隱藏網址欄并將手指從屏幕上移開后，.header-container會重新縮放。
CSS解決方案：
添加以下兩行將防止url欄隱藏并且仍然可以進行垂直滾動：
html {
overflow: hidden;
}
body {
overflow-y: scroll;
-webkit-overflow-scrolling:touch;
}
- 3 回答
- 0 關注
- 588 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消