使用されている場合とbackground-size:cover異なるのはなぜですか?background-attachment: scrollbackground-attachment: fixed

例：

http://jsfiddle.net/enriqg9/Yn43U/

私の背景画像は、特定のポイントまでしか流動的ではありません。ブラウザのサイズを変更すると、縮小し始めます

あなたは私がここで話していることを見ることができます

私はしばらくこの問題を抱えていましたが、修正されていない Chrome の再描画バグのようです。だから私は一時しのぎの修正を探しています。

主な問題は、ページ上の要素に以下を使用する背景画像がある場合です。

別の要素が修正され、子 video 要素がある場合、背景画像を持つ要素が非表示になります。

現在は Safari (および Firefox と IE) で正常に動作するため、正確には Webkit の問題ではありません。提案されたいくつかのプロパティを無駄に適用しました。

初期デモ

現在、私の解決策は、メディアクエリを介して固定背景画像で要素をターゲットにし、固定背景プロパティをオフにすることです。

何か案は？

アップデート

ダニエルのおかげで動作するデモ。

更新 2

より良いデモ！

somesayiniceとFourKitchens のブログ投稿に感謝します。

IE11 の奇妙で迷惑なバグに気付きました。background-attachment が固定された css を使用して背景に配置された画像は、スクロール時にこの奇妙な上下のジグル ダンスを行います。これは主に、スクロール ホイールを使用するとき、またはスクロール バーの矢印ボタンを使用するときに発生します。スクロールバーをドラッグしてスクロールすると、発生しないようです。

このフィドルを試してみてください: http://jsfiddle.net/G6Mdu/ IE を使用している場合、画像の揺れが見られます。クロム、ファイアフォックスなどでは正常に動作します。

解決策はありますか？

検索機能を徹底的に使用しましたが、問題を解決するのに十分な回答が見つかりませんでした。

私の新しいウェブサイトでは、ページを下にスクロールするときにユーザーを追跡するように設定された単一の固定背景画像 (約 250x250px) を実装しています。他の投稿や私自身の実験から、CSS プロパティ "background-attachment:fixed" は iPad / iPhone ブラウザーでは機能しません。

あるユーザーは、次のような「background-wrap」div を作成する回避策を提案しました。

これはある程度機能します。このソリューションの問題 (私にとって) は、ユーザーがモバイル デバイスをピンチしてズームすると、背景画像が前景コンテンツとは異なる方法でスケーリングされ、結果がずさんで重なり合うことです。

答えが見えている場合はご容赦ください。私はこれを何時間も（このサイトと他のいくつかのサイトで）調査しましたが、役に立ちませんでした。よろしくお願いします。

background-size:cover と background-attachment:fixed の div があります。これは、iOS 以外では問題なく動作します。

問題は次の質問に似ています: Using background-attachment:fixed in safari on the ipad iOS の Fixed Position Background

しかし、そうではありません。私が見つけたすべての解決策は、body タグの背景を固定することです。しかし、動的ページの真ん中にある div 内に固定の背景が必要です。したがって、偽の div を position:fixed に設定してもうまくいきません。

iOS で固定位置の背景を機能させる別の方法はありますか? jQuery は必要ですか?

background-attachment:fixed を使用しているときに、Retina 画面でのみ Chrome が背景画像をレンダリングする方法に問題があることがわかりました。Firefox と Safari は意図したとおりに動作します。また、[開発者ツール] > [コンソール] > [レンダリング] の [継続的なページの再描画を有効にする] ボックスをクリックすると、Chrome で動作するようになることにも気付きました。ただし、これを有効にすると、重大なパフォーマンスの問題も発生します。background-attachment:fixed から background-attachment:scroll に変更すると、画像は正常にレンダリングされますが、意図した効果が失われます。

これを回避するための提案はありますか？それとも、Retina デバイスの Chrome をターゲットにして機能を無効にする必要がありますか?

スクリーンショット付きの問題へのリンクは次のとおりです。

https://code.google.com/p/chromium/issues/detail?id=366012

私が試みていることが不可能ではないことを願っています。

最初に説明させてください。状況によっては背景を修正する必要があるレスポンシブ デザインがあります (メディア クエリ ブロック)。問題のデザインは次のとおりです。

http://think-open.at/fileadmin/templates/responsive/content.html

基本的に 2 つのメディア クエリがあります。1 つは最大の高さ用で、もう 1 つは最小の幅用です。ビューポートの高さが十分にある場合、コンテンツ領域にスクロールバーがあり、デザインの高さが固定されます。ただし、ビューポートが定義済みの高さを表示するのに十分な大きさでない場合、height-mediaquery は内側の div からスクロールバーを削除するため、2 つのネストされたスクロール コンテナー (body + div) がなくなり、コンテンツ領域が height: auto に設定されます。

ビューポートが狭すぎる場合はレスポンシブ メディア クエリもありますが、これは問題なく動作します。

今の問題: デザインがページ全体がスクロールするモード (高さ 830px 未満) に切り替わるとき、ビューポートからスクロールしないように、画像を「固定」コンテナに配置したいと思います。しかし、その後、ビューポートに関して背景画像を「固定」配置すると、コンテナdivに関して背景を実際に配置できないという問題が発生します。ここにCSSフィドルを作成しました：

http://dabblet.com/gist/ae5c3598e1465ce0c90e

幅を変更すると、問題に気づきます。画像の右端を緑色のボックスの右端に合わせたいと思います。

これはどういうわけか可能ですか？古いブラウザが検出された場合、CMS には単純な昔ながらのデザインを使用する条件があるため、calc() の使用に問題はありません。