4

IE10 タッチ デバイスの大きな固定背景画像に問題があります。(私は Windows 8 を搭載した Samsung Slate を持っていますが、Surface でも同じ動作が見られると推測していますが、確認できません。)

サイトの背景として大きな固定画像を使用するには、次の 2 つの方法があります。

1) body 要素で CSS3 background プロパティを使用する - これは IE10 タッチ デバイスで正常に動作します。ただし、iOS ブラウザーでは、背景はビューポートと一緒にスクロールします。というわけでステップ2へ。

2) 背景画像を body 要素内に、インライン画像として、または div 内に配置します。画像 (または div を含む) を低い z-index で位置固定として設定します。これにより、iOS の問題が解決され、IE10 でのタッチ スクロールを除いて、テストしたすべてのブラウザーで正常に動作します。スクロール中に背景画像が数ピクセル上下に「ジッター」またはちらつきます。スクロールが終了すると、すべて正しくレンダリングされますが、ジッター効果がひどいように見えます。本文で CSS3 background プロパティを使用する場合、これは発生しません。

この効果を確認する簡単なサイトは、IE10 タッチ デバイスを使用してBackstretchを参照することです。この jQuery プラグインは、本文の div 内で画像を使用します。

これを修正する方法に困惑しています。これは単なるレンダリングのバグかもしれませんが、煩わしく、どのブラウザーを優先するかを決めなければなりません。何か案は？

4

1 に答える 1

0

すばやく簡単な解決策は、レイアウト エンジンを使用することです。Layout Engine は、ブラウザー機能検出を使用して訪問者のブラウザー/ブラウザー バージョンを検出し、対応するスタイルを html タグに追加します (Modernizr と同様)。一部のモバイル、IE7、IE8、IE9、IE10、IE11 など、多くの一般的なブラウザーを検出します。IE11タッチでもジッターが発生するので助かります。

専用の IE10 および IE11 スタイルを使用して背景スタイルを本文に追加し、デフォルトの背景をオフにすると、IE10 および IE11 タッチでの背景のジッターが解決され、かなり負荷の高いデバイス/ブラウザー テストで良好なパフォーマンスが得られました。本文の背景は iOS やその他のブラウザーでは表示されず、余分な JavaScript はモバイルのダウンロード速度にわずかに影響を与えましたが、最小限でした.

http://mattstow.com/layout-engine.html

その他のソリューションには、CSS ハック、IE10 および IE11 の JavaScript 検出 (上記と同様) が含まれます。css ハックおよびユーザー エージェント検出に基づく JavaScript ソリューションを使用する場合、スタイルが他のブラウザー バージョンに適用されないことに注意してください。

ご存知かもしれませんが、固定された背景にはバグがあり、モバイル デバイスでもジッターが発生する可能性があります。解決策の 1 つは、background-attachment:fixed; の代わりに background-attachment:scroll を適用することです。モバイル デバイスの背景用。モバイル デバイスをターゲットにするために考えられる解決策には、"max-device-width" を使用して小さい多機能携帯電話やスマートフォンの画面サイズをターゲットにするメディア クエリや、Categorizr.js を使用する (ブラウザーユーザー エージェントを介してモバイル、タブレット、デスクトップ、テレビを検出し、適切なスタイルを html タグに追加します)。

于 2013-10-11T03:31:01.550 に答える