iPhoneのSafariだけ canvas が表示できなかった
開発中のWebサイトをiPhoneのSafariで確認したところ、 canvas の部分が正常に表示されていませんでした。
WindowsやMacのブラウザでは正常に表示されます。
実機デバッグで確認したところ、コンソールに以下のエラーが表示されていました。
Canvas area exceeds the maximum limit (width * height > 16777216).
Canvasの面積が最大限度を超えているようです。
ちなみに、MacとiPhoneを接続すれば、iPhoneのSafariのコンソールを見ることができます。
詳細は以下の記事にまとめました。
iPhoneのSafariで表示しているページをMacのSafariでデバッグする
canvas の面積が広すぎて表示できなかった。
PCのブラウザで canvas の面積を計算したところ、
- width: 9,931
- height: 1,760
であり、 width * height = 17,478,560 となり、見事に 16,777,216 をオーバーしていましたw
スクロールする前提で、広い canvas を用意していたのですが、そういった使い方はダメだったようです。
width, heightの値を小さくしたところ、ちゃんとiPhoneのSafariでも表示されました。
さいごに
何事にも限度というものがありますね！