固定的身體背景滾動與iOS7上的頁面

我已經使用下面的CSS來終止一個固定的身體背景。除了新的iOS7以外，它幾乎適用於所有瀏覽器。在後者背景不再是固定的。它隨頁面一起滾動。任何想法如何解決這個問題？固定的身體背景滾動與iOS7上的頁面

body 
{ 
background-color: #000; 
background-image: url('../pics/backgrounds/blackWhite.jpg'); 
background-repeat: no-repeat; 
background-position: center; 
background-attachment: fixed;  
webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;  
}

CHEERS

來源

2013-09-27 Gloria

[固定背景圖像與ios7]可能的副本（http://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7） –

我會試着找到一些參考，但手機瀏覽器強制background: scroll因爲重繪太貴。

參考：

CSS - Background images not displaying properly on mobile browsers

@PaulIrish也注意到這一點：

固定背景有巨大重繪成本和抽取滾動性能，這一點，我相信，爲什麼它被禁用。

雖然..有辦法，但..它不是一個快速修復。看看下面的問題，它是評論。

Android/Mobile Webkit CSS Background-Attachment:Fixed Not Working?

來源

2013-09-27 07:58:36 Labu

我升級到iOS7時發現背景附件問題。我不得不用Javascript解決這個問題，因爲我無法單獨用CSS來解決問題。

if (iosVersion >= 7) { 
    $(document).scroll(function() { 
     $('#background').css('background-position', '0px ' + $(document).scrollTop() + 'px'); 
    }); 
}

來源

2013-10-26 00:44:26 xess

您還可以使用Backstretch jquery。

它不是很重，在iOS 7行之有效

來源

2014-01-13 11:20:28 Frinz

我會建議尋找到scrollr（https://github.com/Prinzhorn/skrollr）。這是一個視差庫，可以讓你達到相同的效果。他們仔細考慮的問題有太多的移動設備：移動瀏覽器嘗試以節省電池可以在任何地方：

爲什麼這是一個重要的里程碑，爲什麼別人失敗的一些詞。這就是移動瀏覽器在您滾動時延遲JavaScript執行的原因。尤其是iOS非常積極地完全停止了JavaScript。簡而言之，這就是許多滾動庫無法在移動設備上工作的原因，或者它們帶有自己的滾動條，這是桌面上的可用性惡夢。當我開發skrollr時，這是一個重要的要求，我不強迫你按我想要的方式滾動。桌面上的skrollr使用原生滾動條，您可以按照自己想要的方式（鍵盤，鼠標等）進行滾動。

你剛剛告訴我它不適用於手機，但它爲什麼呢？答案很簡單。在手機上使用skrollr時，您實際上不會滾動。當檢測到移動瀏覽器時，skrollr禁用本地滾動，而是監聽觸摸事件並使用CSS轉換移動內容（更具體的＃skrollr-body元素）。

這是經典的視差背景實現的例子：陳述的示例頁面，另一顆寶石值得注意的 http://prinzhorn.github.io/skrollr/examples/classic.html

：

性能降級沒有JavaScript（移動可以禁用無打破一切）。

來源

2015-03-05 08:48:05 ctrlplusb

我一直在尋找，並使用Github上的Prinzhorn解決方案的基礎知識。謝謝，因爲它工作完美。我只有一個背景圖像顯示在每臺設備上，除了iPad，現在圖像background-attached = fixed和圖像背景大小：封面。

來源

2015-11-06 07:59:56 tosca

我有一個非常簡單解決方案，在這之後，努力解決所有的方法。

我在我的手機IOS設備上遇到了問題。

CSS（桌面）

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap { 
background-size: auto; 
background-attachment: fixed; 
} 

.widget-wrap { 
background-attachment: scroll; 
}

然後我與媒體查詢去除「固定」作爲背景附件覆蓋它。

CSS（移動）

@media (max-width: 767px) { 
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap { 

    background-attachment: initial; 

} 
}

初始 - 將此屬性設置爲默認值。我認爲，因爲IOS不接受'固定'它回落到它接受的默認值，滾動。

這適用於我在每臺設備上。希望它可以幫助別人。

來源

2017-06-07 13:14:34 Ylama

固定的身體背景滾動與iOS7上的頁面

回答

相關問題