canvasがiOS Safariで表示されないときにはまずサイズを疑おう

とある案件で、パーティクル系のプラグインで描画されたcanvasがなぜかiOS Safariで描画されないというバグが発生。
MacにiPhoneをつないで確認してみると、canvasの要素自体は存在しているのに描画だけがされておらず、また適当にサイズを調整してみたりすると描画されるようになるという状態でした。これは…一体…ﾊﾃ……🤔

canvasには各ブラウザで最大の描画サイズの制限がある

プラグイン側がcanvasの幅と高さをコンテンツサイズを倍にして出力しており、それが見事に最大サイズを超越していました😂
最近のモバイルデバイスは画面が広いので、こういった対応だとコンテンツ量によってはすぐに最大サイズの制限を超えてしまうかもしれませんね…

canvasの最大サイズについてはMDNに詳細がありますので、参考までに…👀
https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas#maximum_canvas_size

まとめ

今回は端末の画面サイズに依存したバグだったので、同じiOSでも画面サイズが小さい機種では描画される状態でした。。
確認や原因を考えるときにOS単位で括りがちですが、それぞれの端末の条件によってもまた違ってくることを改めてひしひしと感じました🤥
この世のエンジニアの誰かの一助になれば幸いです🥸