Monaca iOS OnsenUI React 画面遷移すると、次画面表示中に呼び出し元の画面が一瞬表示される。

Question

●開発環境
Monaca + OnsenUI v2 + Reactの環境でハイブリッドアプリを作成しています。

●現象
iOSのiPhoneのみ発生するのですが、
呼び出し元の画面でボタンをクリックして、呼び出し先の画面を遷移して表示すると、
呼び出し先の画面の表示中に呼び出し元の画面が一瞬、表示されてから呼び出し先の画面が表示されます。
画面遷移時にちらついて表示されるので、ちらつかずに画面遷移させたいです。

逆にAndroidは、上記の現象は再現されずに、呼び出し元の画面から呼び出し先画面で遷移すると、
呼び出し先の画面の表示中に呼び出し元の画面が一瞬、表示されることなく、呼び出し先の画面が表示され、
画面遷移にチラツキがなく、スムーズに表示されます。

●聞きたいこと
上記のiOSのみに発生する現象について、回避方法、もしくは、解決方法はありませんか？

Answer 1

チラツキは iOS UIWebView のバグに由来するものです。
-webkit-overflow-scrolling: touch; が設定されたボックスが2つ以上重なると確率的にチラツキが発生します。
（ただし、 -webkit-overflow-scrolling: touch; を無効にすると慣性スクロールも無効になりますのでご注意ください）

Onsen UI 2.7.2 以降ではチラツキがある程度抑えられていますので、
古いバージョンの Onsen UI を利用されている場合は 2.7.2 以降をお試しください。
https://github.com/OnsenUI/OnsenUI/blob/master/CHANGELOG.md#272

2.7.2 以降の Onsen UI でも直らない場合は
-webkit-overflow-scrolling: touch; が付いているボックスを
-webkit-overflow-scrolling: auto !important; で上書きして touch の付いたボックスを減らしたり、
.page__content { will-change: transform; } で GPU を最適化したりしてみてください。

Comments

[toshi_7710]

ありがとうございます。
解決できました！
仰る通り、OnsenUIのバージョンが2.7.2未満でした。
OnsenUIのバージョンを2.8.3、react-onsenuiも1.9.0と最新版にすると、画面のチラツキがなくなりました。