質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2218閲覧

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

toshi_7710

総合スコア23

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2017/12/19 02:44

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

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

チラツキは 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 を最適化したりしてみてください。

投稿2017/12/19 07:09

asial-matagawa

総合スコア164

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

toshi_7710

2017/12/20 02:31

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問