CraftyJSでのモバイル開発 CSSではまり中

Craftyjs でモバイルゲームの開発中なのですが、はまっています。

チュートリアルにしたがって、

の状態からアプリをスタートさせました。

Craftyjs でGame.init() とやると、Javascript でHTML要素が追加されていき、HTMLのbodyタグの中身は、PC上のブラウザでは

<div id="cr-stage" style="width: 320px; height: 432px; overflow: hidden; position: relative; background: rgb(249, 223, 125);"
<div style="position: absolute; z-index: 10; transform-style: preserve-3d; -webkit-transform: scale(1, 1); transform: scale(1, 1); left: 0px; top: 0px;"</div>
<canvas width="320" height="432" style="position: absolute; left: 0px; top: 0px;"></canvas>
</div>

とこんな感じになります。

ところが同じことをAndroidなりiOSなりのモバイル環境でやると、外側の div の style が、position: relative にならないのです。

Craftyjs のソースにあたってみたところ、モバイル以外の環境でのみ、position: relative を追加するようになっていました。

これで何が困るかといいますと、画面をデザイン上、左寄せ、上寄せにしかできないということなんです。

CSSをいじって中央寄せとかにしてしまうと、この position: relative が効果を発揮して、PCブラウザ上ではゲーム画面が中央に来ます。
しかし、モバイル環境ではpotition: relative がないので、その下の canvas の position: absolute と left: 0px; top: 0px が効果を発揮し、ゲーム画面が左寄せ、上寄せになってしまうのです。

背景の位置と、ゲーム画面がずれてしまうのです。

では強引に、CSSで position: relative を書き込んでモバイルでも強制的に relative が効くようにするとどうなるか。
今度はクリック（タッチ）の座標の取得位置がずれてしまいます（こちらについてはまだソース調査中）。

とりあえず今日のところ分かったのはここまでです。

続きの対応策はまた今後、調査していきます。