この問題は SO などで何度か報告されていますが、うまく機能する解決策が見つかりませんでした。
背景が固定された固定位置の div がある場合、特定の条件で、Google Chrome でレンダリングにバグが発生します (Firefox と IE11 で問題なくテストされています)。
問題を説明するために、以下のコードペンを作成しました: https://codepen.io/EricRondo/pen/PaENpe
ご覧のとおり、Chrome のみで、背景は高さ 400px であるはずのすべての div をカバーしていません。
効果は「上」の位置に依存します。top が 50px 増加するとどうなるか: https://codepen.io/EricRondo/pen/WydwMW
スクロールがなくても実際にはまったく問題がないため、高さが定義された別の div を追加しました。非常に奇妙な ！
次のような多くのソリューションに出くわしました:
-webkit-transform: translateZ(0);
しかし、上記のコードペンを含む「一部の」ケースでは機能しますが、より多くのコンテナーと JS コードを含む私の状況では機能しません。しかし、問題の根本は本質的に同じです: 固定位置の div に background-attachement:fixed がある場合にのみ発生します。
この問題に関する完全な Web サイトはこちら: http://reims.dev-indelebil.com/
Firefox では問題ありません。きれいで滑らかな視差効果ですが、Chrome ではこの奇妙な動作が発生します。コンテナーに translateZ(0) またはその他の「GPU トリック」を追加すると、例外的な動作とはかけ離れた、すべての遅延/ぎくしゃくした状態になります。
アドバイスや解決策をお寄せいただきありがとうございます。