Vue.jsで作ったSPAがiOS Safariでクラッシュ多発した原因がCSSのトランジションだった話

検証端末

• iPhone 6
• iPhone 6 Plus
• iPhone 7

現象

Vue.jsで構築したSPAページを開くと、何回かリダイレクトを繰り返してから「問題が起こりました」と出てSafariのタブがクラッシュする。

iPhone 7では再現せず、iPhone6、iPhone 6 Plusで現象を確認。

原因：v-forのループで読み込んだ子コンポーネントで設定したCSSトランジションが重かった

原因の見つけ方：とにかくトライアンドエラー

問題の解決のために、axiosのmethodを削除したり、CSSのクラスを一つずつ削除したりしてトライアンドエラーで原因を探りました。

今回の場合は、リストを生成する親コンポーネントから、1アイテムの子コンポーネントを描画する際にクラッシュが発生していたので、そこを重点的にテストしました。

問題の子コンポーネントでは、

.list__items{
  transition: all 0.1s ease;
  filter: contrast(100%);
}

.list__items:active{
  filter: contrast(80%);
}

という感じで、CSSトランジションの設定を入れていたのですが、.list__itemsのトランジションがページの描画をする際に、DOM構造の変化に反応してトランジションが効いてしまっていたようで、リストを描画する際に大量のトランジションスクリプトが走ってしまい、スペックの低いiPhone 6シリーズでクラッシュしたようです。

CSSトランジションは便利なのですが、思わぬところで描画をしてしまったりするので、きちんと管理する必要がありますね。

クラッシュする状態の時は、テストする度に本体が持てないくらい加熱したので、何かオーバーワークな処理が走ってるんだろうなぁとは思っていましたが、まさかCSSトランジションが問題とはおもわず、解決まで半日時間を費やしてしまいました。

Vue.jsは簡単に構築できる反面、JavascriptやCSSなど、スクリプト全体の管理をしっかりしないと、パフォーマンスが落ちるので、調整が肝ですね。

ということで、オレオレケースすぎて他の方の参考になるかわかりませんが、同じような状況に陥った方は、CSSトランジションの設定も確認してみてください。