CSSトランスフォームの親子と固定子。変換設定のノードを壊す方法はありますか

Question

この情報は、Chromeブラウザでテーマ、3D、トランスフォーム、スライダ、アニメーションを使用するプロジェクトで作業するときに、「位置が固定」の問題を抱えている他の人に役立ちます。

問題：固定された位置に配置された要素：正しい位置に表示されず、壊れず、親コンテナにロックされます。

問題の詳細：すべての親要素が上位の相対位置を持ち、親に固定または固定され、期待どおりビューポートに固定されていない固定子要素。

これに対する答えがで指定されています。この問題が発生しているように見えるhttps://stackoverflow.com/revisions/15256339/2

でSAMLなぜなら変換は、その要素の子が使用する要素のために新しいローカル座標系を作成します。これにより、position：fixedの要素は、transformがnoneでない最後の要素に固定されます。

これは仕様：https://www.w3.org/TR/css-transforms-1/#transform-renderingで指定されているクロームで動作し、バグではありません。

フォローアップの質問として、トランスフォーム要素内にネストされた要素がトランスフォーム要素から完全に抜けるようにする機能要求が作成されていますか？

ブレークアウトが必要な問題は、ネストされた要素の場所を編集できない場合です。たとえば、マークアップが管理されていない場合など、要素を変換したい場合や、その子はボディ座標系内に表示されます。これについての提案はありますか？そうでない場合は？

Answer 1

私は、cssプロパティの変換セットを持つ親から子要素を取り除くことを可能にするソリューションはありません。より良い解が見つかるまで、親の変換を解除するには、以下の作業を参照してください。 noneに変換設定することで、子アイテムをブレイクアウトする

ソリューション： （あなたがトランスフォームセットを持っている親が必要な場合は動作しません）

これと同じ答えにも発見された：ここ - https://stackoverflow.com/revisions/15256339/2 、ここで - https://css-tricks.com/forums/topic/fixed-positioning-not-working-in-chrome/#post-188228を

子をキャッチしている親要素に次のプロパティを設定します。これはw3c仕様（上記のリンクを参照）を対象としていますが、FFには影響しません。
-webkit-transform：なし！重要; トランスフォーム：なし！重要;

親コンテナを相対的な位置として設定していることを確認してください。