14

ある位置にダイアログボックスを表示するモバイルウェブアプリがあります。固定要素が画面全体に重なっています。表示されるコンテンツの量やページのスクロール距離に関係なく、overlay要素はページのコンテンツを暗くし、その上にダイアログが表示されます。<input type="search />ダイアログにフィールドがあります。

Androidでは、ユーザーが入力フィールドをタップしてフォーカスを与えると、かなり不安定な動作が頻繁に発生します（常にではありません）。

  • ソフトキーボードが表示され、すぐに消えます。
  • 下にあるページ（オーバーレイで覆われている）は、数十ピクセル、場合によっては上、場合によっては下、場合によっては両方向、場合によっては繰り返しスクロールします。これは、入力フィールドがフォーカスを失ったときにも発生します。
  • オーバーレイ要素は瞬間的に数ピクセル上下にシフトし、画面の上端と左端に沿って基になるコンテンツを表示します。（1秒以内に元の場所に戻ります。）

これは、組み込みのブラウザを備えたAndroid2.3.4にあります。他のAndroidバージョンでも発生する可能性があります。

ページは次のように構成されています:(これらの癖のいくつかは、ページにスクロールを許可するのに十分なコンテンツが含まれている場合にのみ表示されることに注意してください。）

<head>
  <style type="text/css">
    #menuoverlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: rgba(0,0,0,.75);
    text-align: center;
    }
    #menu {
    display: inline-block;
    margin-top: 1em;
    border: 3px solid #02b;
    border-radius: 8px;
    padding: 1ex;
    background-color: black;
    color: silver;
    }
  </style>
</head>

<body>
  <div id="menuoverlay">
    <div id="menu">
      ...menu items...
      ...menu items...
      <form action=""><input type="search"/></form>
    </div>
  </div>

  <div id="content">
    ...lots of stuff...
    ...lots of stuff...
    ...lots of stuff...
  </div>
<body>

他の誰かがこの振る舞いを見たことがありますか？それを防ぐ方法を見つけましたか？

Webを精査すると、同様の問題に関するいくつかの報告がありました。これまでに読んだ内容の要約は次のとおりです。

  • 多くのAndroidデバイスでは、組み込みのブラウザーがWebKitの入力フィールドを期待どおりに使用していないようです。代わりに、htmlで定義されたフィールドがフォーカスを取得すると、ブラウザーは、個別に作成する新しいテキストウィジェットでそれらをカバーしようとします。
  • これらの重複するテキストフィールドは、多くの場合、cssスタイルを無視し、フォーカスが得られるまでフィールドがスタイル設定されているように見え、その後突然システムのデフォルトスタイルに戻るという効果を生み出します。
  • Androidブラウザーは、これらの重複フィールドを正しく配置できないことがよくあります。置き忘れた場合、それらが表示される場合もありますが、移動したことを視覚的に示すことなく、フォーカスターゲットを移動する場合もあります。
  • これらの問題は、入力フィールドの祖先要素に、、、またはのようなスタイルがある場合によく発生transform: translate3d()し-webkit-backface-visibilityますposition: fixed。

関連するリンクは次のとおりです。

Androidブラウザのテキストエリアはいたるところにスクロールし、使用できません

Android 2.2以降に焦点を合わせたときにCSSを維持するように、HTML INPUTタグのスタイルを設定するにはどうすればよいですか？

Android 2.2/2.3のネイティブブラウザと固定ポジショニング

4

2 に答える 2

12

outline: none要素を設定することで、一時的なオーバーレイのシフトを防ぐことができましたinput。

overflow: hiddenダイアログを表示するときにhtmlを設定しbody、ダイアログを非表示にするときに再度削除することで、ワイルドページのスクロールと消えるキーボードを落ち着かせました。これには、ページのスクロール位置をリセットするという厄介な副作用があるため、保存して必要に応じて復元し、このすべてのハッカーを条件付きでラップして、Android でのみ実行されるようにします。(ダイアログが開いている間に半透明のオーバーレイの下でページの内容が変化するのを見て、私の Android ユーザーがあまり気を散らされないことを願っています。)

touchstart興味深いことに、オーバーレイ要素でイベントをキャッチし、preventDefault() を呼び出すことで、ワイルドなページ スクロールを防ぐこともできました。これは、この狂気のすべてが次のような一連の出来事によって引き起こされたのではないかと思います。

  • touchstartドキュメントルートまでバブルアップ
  • ブラウザはtouchstart、重複した入力フィールドが配置された場所を確認します
  • ブラウザが入力フィールドにフォーカスを与える
  • ソフトキーボードが表示され、入力フィールドに入力できるようになります
  • ソフト キーボードに合わせてビューポートのサイズが変更されます
  • タッチ イベント中にサイズ変更されたビューポートは、ブラウザーへのタッチ ドラッグのように見えます
  • 誤ったドラッグによりページがスクロールし、キーボードが消える

入力フィールドがフォーカスを獲得できず、javascript からtouchstartの呼び出しが機能しなかったため、問題を解決するためにキャッチすることはできませんでした。focus()私は、Android ブラウザfocus()が入力フィールドのメソッドを無効にすることを読みました。これがこの動作を説明しています。html で定義されたフィールド上に作成される重複したテキスト ウィジェットでは機能しないため、おそらくこれを行います。

于 2012-05-10T22:23:01.180 に答える