皆さん、こん。Notedでは主にエンジニアとして活動させていただいてるRaxsy Projectの中の人です。
今回はCSSアニメーションに関して、Safariという大きな壁が立ちはだかりました。その時にどんな問題が起きたのか備忘録もかねてのお話です。
ここ最近、私たちWebエンジニアにとって非常に大きなニュースが舞い込んできました。
それが、
「IE、サポート終了」
やった～～～～～～～！
IEがWeb業界にとって悪しき存在であるかというのは、省略しますが、最高のできごとが起きました。
（実際、著者はnotedアイコンを作成する際に、eの文字がIEのアイコンに似ていたため、拒否したぐらいIEへのヘイトはすごいです。）
こんなに最高なことが起きるなんて！これですべての問題が解決し、人々は争いをやめ、犬も猫も庭を駆け回り、読んでいるあなたにも恋人出来る ———
...と思うでしょ？
実はサイト上でWebアニメーションをするときに戦わなければならないのはIEじゃなくて、Safariなんですよね。
どういうことなのか。説明していきますね。
SafariはフィルターやCSSアニメーションに弱すぎる
これに尽きるんですよ。何せフィルターやCSSアニメーションが絡むとSafari君はカックカクになったり、動かなかったり。
実際、SVGフィルターという、HTML上で定義し画像にノイズを走らせたりできる機能があるんですが、IEですら動くのにSafari君動かないってことがあるんですよ！
?ってなんやねん
CSSアニメーションするときの対策
では、CSSアニメーションをするときに注意することは何なのか。
著者の遭遇した時の対処法をご紹介します。
safari対策となるスタイルいくつか
Perspective
perspective: 1000;
will-change
transformとかする場合に、事前にブラウザに伝えておくことでアニメーションの動きをスムーズにできるらしいです。
will-change: transform;
linearを使わない
animation-transition-timingにlinearを指定するとかくかくするようです。
あまり使わない方がよさげ。
代わりにease系を使う方がいいかもですね。
animation-timing-function: ease;
width・height・marginなど、transform以外でアニメーションしない
マジでこれは意識するといいです。かなり変わります。
最後に
最後に著者が苦しみながら作ったサイトでも見てみてくれると嬉しいな。
https://noted-run.github.io/Screat/demo/potatis/PotatisSourceSelect/
※スマホ想定