【Ionic3】実機では描画が崩れるが開発者ツールの検証では正常2018.09.17ハイブリッドアプリ【Ionic3】実機では描画が崩れるが開発者ツールの検証では正常Ionic3で実機では表示が崩れるのに、開発者ツールでは正常な状態として扱われる現象がありました。その発生原因モーダル内でnavCtrl.push()でPageを表示していたことでした。いう風に画面が崩れたかを説明します。実機で表示が崩れたスクリーンショット実機は、Android7.0のASUSの端末で、タブレットでもスマホでも再現しました。条件を満たすと、上記のスクリーンショットのように、表示が崩れます。毎回同じというわけではありません。画面が真っ白になるような場合もありました。表示の崩れ方はランダムです。開発者ツールでメモリの計測などを行いましたが、負荷を上げても再現しませんでした。ModalControllerが関係しているらしいということがわかってきました。検証用にHomeというPageを作成し、navCtrlのPushとModalのCreateが行えるように作成しました。行なった場合は、開発者ツールでみると以下の画像のようになっています。Pushの場合のHTML構造HomeというPageのみでPushを行なっているため、page-homeというカスタムタグのみが追加されています。ここで注目すべきは、アクティブではないPageにはhidden属性が付与されている点です。hidden属性を付与することで、ブラウザのLayout計算から除外されるため、処理が高速化されています。続いて、ModalCreateを行なった場合です。ModalCreateの場合のHTML構造page-homeとは別の、Modalを生成する専用の場所にion-modalというカスタムタグが生成されます。ModalCreateの場合は、hidden属性が付与されません。この状態でModalCreateを繰り返すと、hidden属性が付いていないカスタムタグがどんどんと生成されるため、無用な計算コストがかかり、表示が崩れます。私の場合、modalを20〜30個程度表示すると、実機で表示がくずれました。いえ、本来Modalをそんなに重ねて表示することはまずありません。気をつけるべきは、ModalCreateで表示したModalで、Pushを行うことです。本来、Pushで表示した表示したPageは専用な場所にカスタムタグが生成されます。ModalからPushされたばあい、Modal専用の領域にPageのカスタムタグが生成されます。上記の画像をみると、ion-modalタグに隣接する形で、page-homeタグが生成されていることがわかります。hidden属性が付いていないことも見て取れます。一度、Modal内でPushをしてしまうと、それ以降のPageでPushを行うと、ずっとModalの領域にタグが生成されてしまいます。そのため、気づかないうちに、hidden属性の付いていないタグが蓄積し、実機が負荷に耐えられなくなった時に、表示が崩れます。昌彦Ionicの最大の特徴は、UIデザインの良さです。海外には多くのユーザがいますが、その多くは「UIデザインがいいからIonicにした」と答えています。