在ios上滾動時在固定背景上的白色區域

我的目標是在iOS/Android上具有縮放的背景，在用戶向下滾動（而地址欄消失）後不需要重新縮放。我發現了幾個有用答案的問題，但不知何故，我在我的iPhone上一直有惱人的行爲。我使用Bootstrap。在ios上滾動時在固定背景上的白色區域

這裏是我的簡單的HTML

<html> 
<body> 
    <div id="background-img"></div> 
    <div id="layout" class="container"> 
    <div id="content-main" class="col-xs-12"> 
     <p>Some text here</p> 
    </div> 
</div> 
</body> 
</html>

這裏是我的CSS

html { 
    height: 100%; } 

body { 
    position: relative; 
    /* required for scrollspy */ 
    font-family: Arial, Helvetica, Sans-Serif; 
    font-size: 30px; 
    font-weight: normal; 
    height: 100%; 
    color: white; 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
    /* smooth scrolling on ios */ } 

#background-img { 
    width: 100%; 
    top: 0; 
    left: 0; 
    bottom: -80px; 
    position: fixed; 
    z-index: -1; 
    background: url("http://www.casapanorama.nl/sites/all/themes/casapanorama/images/bg-klaprozen-1-w1000.jpg") no-repeat center center; 
    background-size: cover; 
} 
#content-main { //nothing fancy }

一切都運行在桌面上的罰款。但是當我在ios上打開網站時（鉻或Safari瀏覽器 - 沒有任何區別），當我向下滾動屏幕時，屏幕底部會出現一個白色條。滾動停止時，欄消失。你可以在手機上自己嘗試：https://jsbin.com/rudetokoxu

我試過這裏發佈的解決方案： CSS background stretches to fill height in iOS but there is white space on scroll。這裏的解決方案似乎合乎邏輯我甚至嘗試將背景div的高度設置爲200％，但無濟於事。

也試過： mobile IOS Google chrome address bar behaviour 這裏： Background image jumps when address bar hides iOS/Android/Mobile Chrome 包括JS的解決方案（它似乎是他們中的一些，所以我沒有嘗試所有的JS解決方案不再起作用）和其他任何我能找到的主題

請幫我解決這個或說服我從來沒有三思而後行是煩人喜歡這些小東西（COS生活充滿了他們的:-)）

BTW：這個網站有上移動同樣的問題：http://www.laregiondesmusees.fr，但這個網站不會受到影響：http://www.heartkids.co.nz

來源

2015-09-05 jzp74

我感到你的痛苦。如果你仔細觀察這個例子，你發現沒有空白問題（http://www.heartkids.co.nz） - 答案在那裏，但很難找到，除非你知道你在找什麼。

你會看到他們在背景圖像上應用了2D變換。在大多數情況下，將固定div與背景圖像一起使用2d或3d變換可以消除像這樣的不需要的空白。

這個CSS應該刪除那個惱人的白色條。乾杯。

.background-img { 
    transform: translate3d(0,0,0); 
}

來源

2015-10-20 20:20:56 user3621874

比較晚的答案，但謝謝！看來，我在Chrome和Chrome上看到的行爲在Chrome中不再存在。我仍然可以在Safari中複製，但是您的建議與我在原始帖子中提到的一些其他提示相結合可以修復此問題。 – jzp74

非常感謝這個答案。這比1000年的js更好。乾杯! –

在ios上滾動時在固定背景上的白色區域

回答

相關問題