[iOS15 Safari] Canvas2Dの文字列描画でページがクラッシュする場合がある

クラッシュする条件

• iOS 15 で Safari などの AppleWebKit エンジンを使用しているブラウザ。
• Canvas2D で ASCII 文字以外を描画しようとしている。
• font-family に -apple-system が含まれている。
• フォント設定値が 20px -apple-system のように、font-size と -apple-system が隣接している。

問題のコード

main.js

let ctx = canvas.getContext("2d");
ctx.font = "20px -apple-system";
ctx.fillText("日本語文字列", 20, 20);

解決方法

2021-09-26 追記
以下の方法を行うと -apple-system 指定が実質されていないに等しい挙動をすることが判明したため、現状 -apple-system を外すか、Apple の対応を待つしかないと思います。

20px x -apple-system のように、font-size と font-family の間に必ずフォント設定値と認識されない任意の文字列を挟むようにする。

その他

html2canvas もこの問題に巻き込まれるので、この場合は CSS に対して上の解決方法を適用すると良い。