モバイル Chrome で全画面の背景画像がジッターするのはなぜですか?どうすれば修正できますか?

モバイル Chrome での背景画像のジッタリング

モバイル、タブレット、タブレット間で遷移する全画面背景画像を備えたレスポンシブ Web サイトの開発時デスクトップでは、iOS/Android ブラウザまたは Chrome でアドレス バーが非表示になると、背景がわずかにジャンプすることが観察されています。 Android。

この問題は、背景画像の CSS プロパティ (「固定」および「カバー」設定を含む) に起因します。アドレスバーが消えると、背景 div の高さが 100% に設定されているため変更されます。これにより、背景画像が影響を受け、新しいコンテナのサイズに合わせてサイズと位置が調整されます。

これを解決するために、2 つの解決策が提案されています。

解決策 1: CSS vh Unit を使用します (非推奨)

背景 div の高さを 100vh に設定すると、希望の高さが維持されます。 行動;ただし、iOS には、ビューポート単位の測定値の不一致を引き起こす既知の vh バグがあります。 max-height やその他の回避策を使用してこの問題を軽減しようとする試みは失敗しました。

解決策 2: Javascript を使用してビューポート サイズに基づいて高さを設定する

JavaScript では、さらに多くの解決策が提示されます。 URL バーのサイズ変更の影響を受けないため、信頼性の高いアプローチです。ビューポート サイズを決定し、それに応じて背景 div の高さを設定すると、アドレス バーの可視性に関係なく、画像は静的なままになります。

JavaScript スクリプトは次のとおりです:

var bg = $("#bg1, #bg2");

function resizeBackground() {
    bg.height($(window).height());
}

$(window).resize(resizeBackground);
resizeBackground();

追加の調整:

JavaScript スクリプトはバックグラウンドのサイズ変更の問題に対処していますが、次の場合に顕著なギャップが発生する可能性があります。下にスクロールします。これは、背景の高さの計算に小さなオフセットを追加して、潜在的なギャップを効果的に隠すことで解決できます。

function resizeBackground() {
    bg.height( $(window).height() + 60); // Add 60px to compensate for gap
}

以上がモバイル Chrome で全画面の背景画像がジッターするのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。