Font Awesome 5 を疑似要素で使ったら、iOSの描画でリフローが起きるのでやめた

先日iPhoneでこのサイトをチェックしていたら、画面をスクロールする度に再描画(リフロー)が発生してしまって、しばらく原因がわからなかったのですが、Font Awesome5 (FA5)で疑似要素を使うのをやめたら、元に戻りました。

下のアニメーション画像は、左がFA5 の疑似要素あり、右が疑似要素なし の状態を比較したものです。スクロールすると一瞬空白が表示された後にワンテンポ遅れてコンテンツが表示されます。左の画像では、一度表示されたはずのコンテンツがスクロールすると消えてしまうのがわかると思います。

調べてみると、公式ドキュメントでも非推奨の模様。

SVGおよびJSで擬似要素を使用できますが、この方法の使用はお勧めしません。 使用オプションがそれほど多くないため、設定が難しく、Font Awesomeを使用する最も遅い方法です。 (場合によっては痛みを伴う遅さ。)

Although you can use pseudo-elements with SVG and JS we do not recommend using this method. It does not provide as many usage options, is difficult to configure, and is the slowest method of using Font Awesome. (Painfully slow in some cases.)

Font Awesome 公式

上記画像を見ていただければわかりますが、確かにこれは酷いレベルです。

どうやら、Font Awesome 5 のSVG+JS版は、CSS版よりも高度なスタイリングが出来る分、CPUとメモリの要求水準が高く、疑似要素を使うと、劇的にパフォーマンスが低下する場合があるようです。つまり閲覧する端末の性能を選ぶということ。

CSS版で疑似要素を使う場合は問題ないようですが、当サイトではSVG+JS版を使いたいので、FA5の疑似要素を使うのをやめました。