CreateJS を使ったWebアプリをいくつか作ったのですが、iPhone はサクサクでも Android でやたらハマる。
Android 2.3 で最適化したつもりのものが 4.0 の標準ブラウザで落ちたりする。
機種や OS のバージョンにより動作がさまざまなため確認しきれない。
というとこでハマったポイント3つを共有します。
誰かもっとよい解決策を教えてくれるとありがたい。
即死ポイントその1
Android 4.0.4 で Canvas をリサイズするとブラウザが落ちる
回避策
Canvas 領域を広めにとっておき、Canvas ではなく Container 側をリサイズ。はみでた部分は css でトリミング。これで落ちなくはなるが全体的にボケる。
- 2013.7.7 追記
- その後、以下の方法を試したところ落ちずに動作すことが確認できました。
描画とかGPUアクセラレーションの怪 (モバイル編) ::ハブろぐ
さらにこちらの処理を追加したところ原因不明のクラッシュもなくなりました。
CreateJSでハマったこと – まるちゃんブログ
即死ポイントその2
Android 2.3 で Canvasエリアを素早く何度もフリックすると描画が停止する
CreateJS に限った現象ではなく、Android 2.3 × Canvas で発生する
復帰法
- Canvas 外の要素を書き換える。ただし書き換えた箇所はスクロールするまで更新されない場合がある。
- または、アドレスバーが表示される状態でスクロール。
ハマりポイント
Android 2.3 × EaselJS でマウスイベントの動作がおかしい
回避策
- EaselJS のマウスイベントは使わずに canvas に対して ontouchstart を設定、座標をみて切り分ける。