transition・animationがスムーズじゃないと思ったら

IEやEdge、Androidの一部のブラウザでは:before、:after擬似要素にtransitionやanimationをかけると、その要素がスムーズにアニメーションしなかったり、あるいは周辺の要素に同時にアニメーションを付加していた場合に動きがおかしくなったりする現象が見られることがある。

解決方法は2つあり、

  • transitionの場合にはtransition-propertyをできるだけ限定する(allにしない)こと
  • 擬似要素ではなく素直にdivなどの新しい要素でアニメーションさせること

が挙げられる。
ひとつめはブラウザの負荷を下げるということで納得できるが、もうひとつは擬似要素のほうがレンダリング負荷が高いということだろうか?
普通の要素と擬似要素はブラウザの解釈の仕方が違い(IEではline-heightにremを使うと擬似要素のみバグったりすることもあるので)からくるものなのか?

謎だが、もしお困りの方がいましたら是非試してください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA