Cordova、Bootstrap、Angular JS (1.3.x) を使用してハイブリッド アプリを作成し、Chrome デスクトップ ブラウザーと Android デバイス (ロリポップ、5.0.2) でテストしています。
特定のビューで、 ngDialogを使用してモーダル ウィンドウを開きます。このダイアログのコンテンツは、一般的なスマートフォン サイズの高さを超える可能性があるため、垂直スクロールが必要です。そして、ここに問題があります:
ダイアログの下部に (最初の視界の外に) 表示されるべき要素のほとんどが表示されないか、レンダリングされません。消えたインタラクティブ要素があるはずの領域をやみくもにタップすると、それらがペイントされます。もう一度上にスクロールすると、上部の要素が消えます。 この動作は、Android 4.4 には存在しませんでした。
これで、Windows Chrome ブラウザー (v43) でこのエラーを再現できるようになりました。
手順は次のとおりです。
- この Plunkr を実行しますhttp://embed.plnkr.co/VGYUe2i9vwsQZ21vc3LB/preview
- 最近の Chrome バージョンでテストする
- このプランカーが埋め込みビューに表示されていることを確認してください (重要)
- Chrome デベロッパー ツールを開く
- 「Toggle device mode」(スマホアイコン)をクリック(重要)
- 縦の解像度を高さ約600pxに制限します「ダイアログを開く」をクリックし、一番下までスクロールします
- 「こんにちは、見えますか?」と読めますか??
- そうでない場合は、テキスト ボックスの上または下にあるパネルのいずれかを押すと、再描画が行われ、テキストが表示されます。
これはどのように見えるかです:
OK ではありません -> マークされた赤いボックスにテキストがありません:
OK - >それをクリックするか、ブラウザのタブを切り替えた後
郵便配達員のブログでこの記事を見つけましたが、私の場合、「修正プログラム」が機能していないようです。 http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/
誰かが私を正しい方向に向けることができますか?