background-attachment：background-sizeとの干渉を修正しました。

Question

Modernizrがブラウザで背景サイズをサポートしていないことが検出された場合、適切なフォールバックが表示されます。

.wrap { 
    width: 200px; 
    height: 116px; 
    position: absolute; 
    background-image: url(image.jpg); 
    background-attachment: fixed; 
    background-position: 0 0; 
    background-size: 200px 116px; 
    background-repeat: no-repeat; 
} 

ここでは例です：http://jsfiddle.net/crowjonah/6xYNm/

それはしかし、私は、Androidのいくつかの事例でトラブルを抱えている、クロム、Firefoxの、サファリ（デスクトップとiOS）に美しく見えます。

ここで正しく表示されるデバイスのためのUAです：

Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; Xoom Build/IMM76L) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30 

、ここではないデバイスのためのUAです：

Mozilla/5.0 (Linux; U; Android 4.2.2; en-us; sdk Build/JB_MR1.1) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 

のAndroidの新しいバージョン（エミュレート）がスケール固定された背景画像は、ビューポートにフィットするように（ぼくらは）考えられ、そのコンテナのサイズや定義されているbackground-sizeには注意を払わず、すべて吹き飛ばされてピクセル化される。

これで大丈夫です。実際には、それは何MDN says will happenです：

背景の添付ファイルが固定されている場合は、背景配置領域ではなく、彼らが存在している場合は、スクロールバーがカバーするエリアを含まないブラウザウィンドウの全領域、です。

私の問題は、それが適切かどうかを合理的に検出する方法がわからないため、適切に調整できるようになります。ページ上のレイアウトとアニメーションのために、私は本当にそれをサポートするすべてのブラウザのために背景を修正したいと思うし、scrollのために解決することができます。

アップデート（2013年10月3日）： 混乱を防止するために、私は私が定義したCSSプロパティの多くを正当化するより現実的で問題の例を示すためにバイオリンを更新しました：http://jsfiddle.net/crowjonah/QtpVN/

Answer 1

2つのクラス.works {...}と.does_not_work {...}内でCSSを準備してから、JavaScriptを使用して問題を解決することができます。結果に応じて、JavaScriptは上記のCSSクラスを調整するだけです。最後に、携帯電話（Androidなど）のJavaScriptをオフにするのは誰ですか？あなたはこの考えをどう思いますか？よろしく、M.

Answer 2

display:block;

を追加し、再び

Answer 3

を試してみてくださいbackground-sizeを削除するには、あなたは

背景画像を試してみました：URL（image.jpg）を、 background-size：100％;

離陸位置：絶対; background-attachment：fixed;