iOS7のページで固定されたボディの背景スクロール

Question

次のCSSを使用して、固定されたボディの背景を止めました。新しい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

Answer 1

私がしようとすると、いくつかの参照を見つけることが、再描画があまりにも高価であるため、モバイルブラウザがbackground: scrollを強制します。

---

参考：

固定背景は、巨大再描画コストを持っているとされ、スクロールのパフォーマンスを、間引く：

CSS - Background images not displaying properly on mobile browsers

@PaulIrishもこれを指摘私は、なぜ信じるそれは無効にされました。

しかし、これを回避する方法はありますが、それは迅速な対応ではありません。 次の質問とそのコメントをご覧ください。

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

Answer 2

iOS7にアップグレードするとき、私は、バックグラウンド・添付ファイルの問題に気づきました。 Javascriptを使って問題を解決しなければならなかったので、CSSだけで解決策を見つけることができませんでした。

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

Answer 3

Backstretch jqueryも使用できます。

それは私がscrollr（https://github.com/Prinzhorn/skrollr）に探してお勧めします重くはないとiOS 7

Answer 4

に適しています。同じ効果を実現する視差ライブラリです。モバイル端末の問題を慎重に検討してきました。

なぜこれが重要なマイルストーンなのか、なぜ他の理由で失敗したのかについてのいくつかの言葉：モバイルブラウザはどこでも可能な限りバッテリーを節約しようとしています。そのため、あなたがスクロールしている間、モバイルブラウザがJavaScriptの実行を遅らせるのはこのためです。特にiOSはこれを非常に積極的に行い、JavaScriptを完全に停止します。要するに、それは多くのスクロールライブラリがモバイルデバイス上で動作しないか、またはデスクトップ上でユーザビリティの悪夢となる独自のスクロールバーが付いている理由です。私が望む方法でスクロールするよう強制しないように、私がスケーターを開発している間は、それは重要な要件でした。デスクトップ上のskrollrはネイティブのスクロールバーを使い、あなたが望むように（キーボード、マウスなど）スクロールすることができます。

モバイルでは機能しないと言われましたが、なぜですか？答えは簡単です。モバイルでskrollrを使用すると、実際にはスクロールしません。モバイルブラウザを検出すると、skrollrはネイティブスクロールを無効にし、代わりにタッチイベントをリッスンし、CSSトランスフォームを使用してコンテンツ（より具体的には＃skrollr-body要素）を移動します。ここで

古典的な視差背景の実装の一例です： 例のページに記載されたhttp://prinzhorn.github.io/skrollr/examples/classic.html

、注目に値する別の宝石：

はJavaScriptをせずに粗く（せずに、モバイル上で無効にすることができすべてを壊す）。

Answer 5

私は検索しており、githubのPrinzhornソリューションの基本を使用しています。ありがとう、完璧に動作します。 iPad以外のすべてのデバイスに表示される背景イメージは1つのみで、現在はbackground-attached = fixedおよびimage background-size：coverです。

Answer 6

これを解決するためのすべての方法で苦労して、私は非常にの簡単な解決策を得ました。

私のモバイル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が「固定」を受け入れないので、受け入れたデフォルト値に戻ってしまうと思います。

これはすべての端末で機能しました。他の人にも役立つことを願っています。