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単位で括りがちですが、それぞれの端末の条件によってもまた違ってくることを改めてひしひしと感じました🤥
この世のエンジニアの誰かの一助になれば幸いです🥸

WEBサイト制作のお問い合わせ、お見積り依頼、ご質問は
こちらのお問い合わせフォームよりお願いいたします

メールお問い合わせはこちら

フライング・ハイ・ワークスの紹介

フライング・ハイ・ワークスは、東京都渋谷区にある2000年3月創業のシステム開発にも対応できるデザインも強いWeb制作・ホームページ制作会社です。東京都及びその近郊(首都圏)を中心として、SEO対策を意識したPC及びスマホのサイトをワンソース(レスポンシブ対応)で制作します。

実績

デザイナーチームは、グラフィックデザインやイラストの制作も得意としており、著作権を意識しない素材の提供が可能です。システム・コーディングチームでは、Laravelなどを使用したスクラッチからのオリジナルシステムの構築を始め、WordPressのカスタマイズを得意としております。

また、SEOやランディングページ(LP)、広告向けバナーなどを他社様でやっていた作業の引継ぎでも問題ありません。制作実績は多数ございますので、お客様に合わせたご提案が可能です。

500点以上のフライング・ハイ・ワークスの制作実績ページをご覧ください!

採用

FHWでWebディレクター、Webデザイナー、Webプログラマーやシステム開発者として働いてみたいと思っていただける方は、下記にて定期的に募集をしておりますので、ぜひ、ご応募ください。

WEBサイト制作のお問い合わせ、お見積り依頼、ご質問は
こちらのお問い合わせフォームよりお願いいたします

メールお問い合わせはこちら