ウェブサイトを構築していると意外な組み合わせの問題にぶつかることがあります。
今回はposition: fixedを掛けた要素の親にtranslateやfilterを設定すると「position: fixed」が効かないという
減少にぶつかりました。
ちなみに今回私はページ切り替えにぼかしながら表示されるアニメーションを実装していて
ページ内でposition: fixedが使用できなことに気づきました。
例えば親の要素に以下のようなCSSを設定しているとします。
transform: translate3d(1, 1, 2,20deg);
filter: blur(0);
これらを設定すると「position: fixed」を設定している要素にはposition: relative指定時の位置を取ることになります。
調べてみたものの対策はありませんでした。
対策知っている人、コメントでぜひ教えてください。
JSとかでなんとかなるもんなんだろうか…。