問題タブ [background-attachment]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
firefox - Firefox 2018 で動作しない変換で修正されたバックグラウンド アタッチメント
皆さん、こんにちは。私のコードに問題があります。background-attachment は、Firefox と IE で transform:rotate() を削除した場合にのみ機能し、代わりに Chrome でうまく機能します。
これは私のHTMLです
これは私のcssです
したがって、翻訳プロパティを削除すると明確になるため、追加するとどこでも機能し、クロムでのみ機能します。
css - Chrome での奇妙な動作 + position:fixed + background-attachement:fixed
この問題は SO などで何度か報告されていますが、うまく機能する解決策が見つかりませんでした。
背景が固定された固定位置の div がある場合、特定の条件で、Google Chrome でレンダリングにバグが発生します (Firefox と IE11 で問題なくテストされています)。
問題を説明するために、以下のコードペンを作成しました: https://codepen.io/EricRondo/pen/PaENpe
ご覧のとおり、Chrome のみで、背景は高さ 400px であるはずのすべての div をカバーしていません。
効果は「上」の位置に依存します。top が 50px 増加するとどうなるか: https://codepen.io/EricRondo/pen/WydwMW
スクロールがなくても実際にはまったく問題がないため、高さが定義された別の div を追加しました。非常に奇妙な ！
次のような多くのソリューションに出くわしました:
しかし、上記のコードペンを含む「一部の」ケースでは機能しますが、より多くのコンテナーと JS コードを含む私の状況では機能しません。しかし、問題の根本は本質的に同じです: 固定位置の div に background-attachement:fixed がある場合にのみ発生します。
この問題に関する完全な Web サイトはこちら: http://reims.dev-indelebil.com/
Firefox では問題ありません。きれいで滑らかな視差効果ですが、Chrome ではこの奇妙な動作が発生します。コンテナーに translateZ(0) またはその他の「GPU トリック」を追加すると、例外的な動作とはかけ離れた、すべての遅延/ぎくしゃくした状態になります。
アドバイスや解決策をお寄せいただきありがとうございます。