Mac Safariでposition: fixed;で固定されない時は親要素をチェック。
Mac Safariで「position: fixed;」を指定しても固定されない場合があります。結論から言うと、固定した要素の親要素に「animation-fill-mode: both」が指定されているのが原因でした。
サイト制作時にanimate.cssを利用してサイト全体にアニメーションさせており、その時利用する.animatedクラスが原因でした。
固定要素の親要素に.animatedを指定すると固定されず、不安定な動きになります。
全てチェックしたわけではありませんが、Mac Safariだけ見られる現象のようで、同じwebkit系のGoogle Chromeでは問題なく固定されました。
固定する場合は上記のように.animatedを指定した要素の外側に記述すれば問題解決です。
0コメント