Ionic-framework: フォームフィールドにフォーカスがあると、ヘッダーバーがステータスバーの後ろに移動するか、ビューポートから完全に外れます。

＃818の複製

ありがとう。 私たちはbeta2のこれらのキーボードのバグに取り組んでいます。

これを引き起こす可能性のあるものについて何かリードがありますか？
beta2のリリースを計画しているときには、私のアプリはすでに公開されています;-)

これは、この問題の実用的なデモンストレーションです。

「Ionic、v1.0.0-beta.1」を使用した「GettingStarted」プロセスでこれをテストしました。

私のステップ：

• npm install -g cordova ionic
• イオン開始statusBarTestサイドメニュー
• イオンプラットフォームはiOSを追加します

次に、 app.jsを編集して、単純なフォームから始めました。 ：

<ion-view title="Form Test">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">

    <div class="list">
      <label class="item item-input">
        <input type="text" placeholder="First Name">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Middle Name">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Last Name">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Address 1">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Address 2">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="City">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="State">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Zip Code">
      </label>
    </div>

  </ion-content>
</ion-view>

それで：

• イオンビルドiOS
• イオンエミュレートiOS

結果は次のとおりです。

ご覧のとおり、キーボードはフォームをステータスバーに押し上げます。

ちょっとジャスティン、問題はそれだと思います

そのショットを与えて、それが役立つかどうか私に知らせてください。

2014年4月2日水曜日午後4時34分、Justin [email protected]書き込み：

これは、この問題の実用的なデモンストレーションです。

「Ionic、
v1.0.0-beta.1 "。

私のステップ：

• npm install -g cordova ionic
• イオン開始statusBarTestサイドメニュー
• イオンプラットフォームはiOSを追加します

次に、app.jsを編集して、単純なフォームから始めました。 ：

<div class="list">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Middle Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Address 1">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Address 2">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="City">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="State">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Zip Code">
  </label>
</div>

それで：

• イオンビルドiOS
• イオンエミュレートiOS

結果は次のとおりです。

[画像：ステータスバーの問題] https://cloud.githubusercontent.com/assets/57374/2597008/fb174690-baad-11e3-80aa-c88985210bcb.gif

ご覧のとおり、キーボードはフォームをステータスバーに押し上げます。

このメールに直接返信するか、Gi tHubhttps：//github.com/driftyco/ionic/issues/932#issuecomment-39386769で表示してください
。

残念ながら、それは役に立ちませんでした。 サンプルプロジェクトでは、これを「style.css」に追加しました。

body, .ionic-body {
    position: static;
}

Ionic CSSファイルの後に「style.css」が含まれていても、これは機能しませんでした。 また、Safariのデバッグで、 position: staticが本体に適用されていることを確認しました。

それで、運が悪かったので、体だけを試してみました。

body {
    position: static;
}

次に、「ionic.css」ファイルを更新しました。 これはまだ機能しませんでした。

また、ヘッダーを静的にするつもりだったのではないかと思いました。 だからやってみました。 それでも運がない。

ああ、それがiOS7.1だけだとは思わなかった。 現在Macにアクセスできないので、明日最初に見ていきます。 これを調べてくれてありがとう。

作業デモをありがとうJustin：+1：

設定によっては、 .bodyをposition:staticも、 .paneと.viewも絶対位置があるため、何も修正されません。

私が作成したカスタムモバイルウェブアプリでは、ヘッダーはこれらの重要な位置の要素の外側にある必要があり、キーボードが上がっているときにヘッダー自体がposition:fixedに設定されたままになります。 Androidには、キーボードの上に収まるようにビューをスクイーズするadjust-resizeというオプションがあります。 一方、iOSは、ビューをパンして入力を画面の中央に配置するだけです。

Cordovaには、デフォルトでfalseに設定されている「KeyboardShrinksView」と呼ばれる設定もあります。 私はまだこれを見ていませんが、Androidがadjust-resizeですでに行っていることに対するiOSの解決策のように見えます

これらの違いの両方の間に調和を作り出すことは、仕事の1つの地獄です

現在、これらの問題をすべて解決するために、キーボードの修正に積極的に取り組んでいます。

このバグは、残念ながら毎晩1717では修正されていません。

@tlancinaが気づいたことの1つは、最新のタップ修正では、入力を直接クリックしてもヘッダーが上に移動しないことです。 したがって、この問題の一部は解決したと思います。 ただし、入力をラップするラベルをタップすると、300ミリ秒後に醜いネイティブスクロールが実行されます。 デフォルトのIoniccssの動作方法では、ラッピングラベルと実際の入力の違いを区別するのが難しいため、これが常に動作するとは限らない理由の一部である可能性があります。 私はこのテストページを使用し

今のところ、その理由は、ラベルのクリックのデフォルトを妨げていないためだと思います。 入力をラップするラベルでe.preventDefault（）を実行すると、最初のタップでキーボードが自動的にポップアップしません。 これについてもっと調べてみます、ありがとう。

@adamdbradleyは、この修正が夜間に発生したときに、この修正の別のテスターとして志願しました。 THX。

残念ながら、この問題は1.0.0beta2ではまだ解決されていません。

@CoenWarmer私たちは問題を認識しており、現在も取り組んでいます。 また、キーボードの問題を報告するときは、プラットフォーム、プラットフォームバージョンを提供してください。これは、モバイルブラウザ、エミュレータ、またはコルドバの問題であり、コルドバの場合はフルスクリーンかどうかです。 その他の有用な情報には、ラベルや入力など、タップした要素、入力に到達するためにいつでも手動でスクロールする必要があったか、メタビューポートにheight = device-heightがあるかどうか、要素が仮想キーボードが最終的に表示される場所の下、キーボードが表示される場所の半分、または上でスクロールする必要がない場所です。 ありがとう

遭遇：

• iOS7.1.1
• Ionic1.0.0ベータ2
• コルドヴァで
• シミュレーターとデバイスで
• フルスクリーンではありません
• ラベルは使用せず、入力のみ
• 入力フィールドにフォーカスがあった後、ビューをスクロールできます。入力フィールドにフォーカスがない場合、ビューをスクロールできません。
• ビューがフォーカスを取得してキーボードがポップアップした直後は、ビューはスクロールしません。 入力フィールドにフォーカスが移ったら、入力フィールドに指を置き、上にドラッグしてビューをWebビューの外に移動できます。

Android 4.4および4.3でも発生し、1.0.0beta2も使用します。 iOS7.1とまったく同じ状況。 したがって、入力フィールドにフォーカスがあり、キーボードがポップアップするときは、何も問題はありません。入力にフォーカスがあり、入力フィールドに指を置いて上下にドラッグし始めると、すべてのコンテンツをビューの外に移動できます。 。 後でスクリーンキャストを作成します。

スクリーンキャスト： https ：

beta2の後、小さな画面（iphone3やiphone4など）でこの問題が発生します。

iphone 5（ok）

iphone 4（問題）

@zelphirこの問題を再現するcodepenを提供していただけますか？ どちらもiOS7.0ですか、それとも7.1ですか？

@CoenWarmerは、たまたまコンテンツ領域への入力ですか？ 私があなたの問題を再現できる唯一の方法は、スクロールビューにない入力を持つことです。

明確にするために、これは、スクロールビューを使用していない場合に予想される動作です。 キーボードの下に入力があり、JSを使用してそれらにスクロールできない場合、ブラウザーはコンテンツを上にシフトして表示できるようにする必要があります。そのため、すべてを上に移動できます。

@tlancina私の入力はコンテンツ領域内にありません。

これは私が使用しているコードです：

<ion-view title="Delegates">
  <div class="search-container">
    <div class="search-inner">
      <input ng-model="searchText" placeholder="Search" ng-enter="ScrollTop()">
    </div>
  </div>

  <ion-tabs class="tabs-icon-only tabs-double">
    <ion-tab title="A-Z">
      <ion-content class="slide-under-header has-header has-tabs has-double-tabs" padding="false" delegate-handle="DelegateScroll">
        <!-- stuff -->
      </ion-content>
    </ion-tab>
    <!-- another ion-tab -->
  <ion-tabs>
</ion-view>

これが予想される動作であるとあなたが言っていることに完全に従うかどうかはわかりません。 現在、すべてがヘッダーの下をスクロールすると、アプリが壊れているように見えます。 代わりに、入力フィールドをイオンコンテンツ内に配置する必要がありますか？

ページの下部に到達する、いくつかの入力のリストがあるとします。 Javascriptを使用してスクロールできる領域内にない場合、キーボードが表示されたときにどのように表示できますか？ 唯一の方法は、ネイティブブラウザのスクロールを使用することです。これは、コンテンツをシフトすることで機能します。ヘッダーを含むすべてのコンテンツです。

入力またはフォーカス可能な領域がイオンスクロールビュー内にある場合、デフォルトのスクロールを防ぎ、Javascriptを使用してそれを表示し、ヘッダーはそのままにします。

残念ながら、私はUIルーターの専門家ではありませんが、ページ上のすべてのコンテンツの周りにイオンコンテンツを配置して、それが役立つかどうかを確認してください。

私は今理解していますが、それはナビゲーションバー全体の望ましくない視覚効果が戻るボタンを含めて消えることにつながりませんか？

私のユースケースでは、入力フィールドをイオンコンテンツ内に配置した場合、iOSとAndroidでトランジションアニメーションが正しく機能するように、ヘッダーバーの下の上部に固定されていることを確認するにはどうすればよいですか？

ええ、タブをジャグリングして入力用のスクロール可能な領域を維持する状況はかなりトリッキーなようで、かなり頻繁に発生するはずです。 @adamdbradleyと私は今それを調べています。

あなたが次のようなことをした場合、私はトランジションの問題を理解しているかどうかわかりません

<ion-content>
  <div class="search-container">
    <div class="search-inner">
      <input ng-model="searchText" placeholder="Search" ng-enter="ScrollTop()">
    </div>
  </div>
</ion-content>

それはアニメーションを台無しにしますか？ おそらく1つしかないことが想定されているため、複数のコンテンツ領域があると他のことが混乱する可能性があります。

@tlancinaああ、すごい、1つのパーシャルで2つのイオン含有元素を使用することを考えていませんでした。 それがどのように機能するかを見て、報告します。

私が参照していたトランジションアニメーションの問題は、特定のAndroidバージョンで発生します。 要素でposition：staticを使用し、そのビューから移行した場合、Android 4.1から4.3（100％確実ではないが、チェックされると思います）では、アニメーションが開始されると、これらの要素はロックされたままになります。 したがって、すべての要素（イオンコンテンツ、タブ、ヘッダーバーなど）は左に移動し始めますが、位置を指定した要素：staticは、アニメーションが完了するまで同じ場所に残ります。 これはiOSでは発生しません。 これが、私がどこでも静的な位置を使用することを躊躇した理由です。

@tlancina入力要素を1つのイオンコンテンツに入れ、残りのコンテンツを別の2番目のイオンコンテンツに入れてみました。 残念ながら、input要素に入力された入力は、他のイオンコンテンツにあるng-repeatをフィルタリングしなくなりました。 他の提案？

@CoenWarmerは、ion-contentが子スコープを作成するためです。

両方のコンテンツにコントローラーを配置してみてください。 コントローラがそうである場合は、入力にプリミティブを使用しないでください。

スコープ継承の「ドット」問題に悩まされています。別の子スコープのプリミティブが、親スコープではなく子スコープに設定されています。 分かりますか？ そうでない場合は、lemmeが知っているので、リンクを見つけて説明します。

よく知らない、残念ながら違います。 共有したいですか？ :)

https://www.youtube.com/watch?v=DTx23w4z6Kc

ああ、うん、それは理にかなっている！ もう一度やり直します：+1：

ねえ@adam。 入力付きのフッターはどうですか？ これはスクロール領域の外側にあるため、問題も発生します。 それを回避する方法はありますか？

iPad（7.1）でもこの問題が発生します。 ionicは、設定されていない場合、最近の変更後にビューポートにheight = device-heightを追加することを確認しました。
このプロパティにより、ビューポートは約200px（高さ）から大きくなり、完全にスクロール可能になります。
私がそれを取り除くとき、それは働きます。
.viewと.paneをposition：fixedに、bodyをposition：staticに設定すれば、どういうわけかこれを修正できますが、メインビューポートはまだ大きく、指を上下に動かすと右側にスクロールバーが表示されます。

ちなみに...これは入力フォーカスから独立しています。 入力フォーカスはスクロール位置を移動するだけなので、結果を確認できます。

やあみんな、ここでの現在の進歩は何ですか？
カスタムイオンファイルを作成し、そこから追加の「height = device-height」を削除しました。
この変更後、すべてが正常に機能します。 CSSの修正はもう必要なく、入力フィールドのタップに焦点を合わせることが正しく機能しています。
iOSでKeyboardプラグインも使用しており、次のことを行います。

Keyboard.shrinkView(true);
Keyboard.hideFormAccessoryBar(true);

入力を別のイオンコンテンツに配置しても、入力がフォーカスされたときに、ヘッダーバーを含むビュー全体をWebビューの下でスクロール可能にする動作が停止することはありません。 以前のスクリーンキャストと同じ動作が発生します： //www.dropbox.com/s/2g6b41n3s3vpj0s/2.mov

@ D3CK3Rは、さまざまなビューポートシナリオをすべて

@CoenWarmer Ionicキーボードプラグインを実行して

Cordovaプロジェクト内からcordova plugin add https://github.com/driftyco/ionic-plugins-keyboard.gitを実行することでインストールできます。

@tlancinaそれはうまく

プラグインは本番環境の準備ができていますか？ このプロジェクトはストアに公開されたばかりなので、できるだけ早く展開したいと思います。

@CoenWarmerあなたは私があなたの最後のコメントを見てどれほど幸せだったか

@adamdbradley @tlancina

うん！！！

@CoenWarmerはい、iOSの場合は

閉じてもいいですか？ @tlancina

これは、beta14リリースでもまだ問題でした。 いくつかの大規模なデバッグの後、私はついに修正を見つけました。

私の場合、それは私のmeta viewportに関連していました。

元の値（ヘッダーがステータスバーの後ろに表示される原因）

<meta name="viewport" content="width=device-width">

新しい値（この問題を修正）

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

私はbeta1前にプロジェクトを開始したので、これはおそらく私が気づかなかったレガシーhtmlでした。

これが誰かを助けることを願っています。

@rvanbaalenインデックスファイルに正確なメタビューポートがありますが、私の場合、入力テキスト要素にフォーカスすると、本文がステータスバーの上に表示され、ステータスバーが非表示になります。 その後、キーボードを下にスライドさせても、ステータスバーは非表示のままになります。

これは私にとってまだ問題です。 キーボードプラグインを追加しました。 単純なテキスト領域を「メモ帳」として使用して、高さ100％のスタイルで表示されるように画面全体に表示されるようにしようとしています。 これらのスタイルを機能させるには、高さスタイルが親の高さまでしか展開されないため、scroll = "false"を使用してスクロールを無効にする必要がありました。 この問題を回避するために、この「メモ帳」を作成するためのより良い方法がおそらくあります。提案をいただければ幸いです。

以下のスクリーンショットをよりわかりやすくするために、テキスト領域に背景色を追加しました。

私はこのビューを使用しています：

<ion-modal-view>
    <ion-header-bar class="bar-royal">
        <div class="buttons">
            <button class="button button-clear" ng-click="vm.closeAddNote()">Cancel</button>
        </div>
        <h1 class="title">Add Note</h1>
        <div class="buttons">
            <button class="button button-clear" ng-click="vm.saveNote(vm.noteContent)">Done</button>
        </div>
    </ion-header-bar>
    <ion-header-bar align-title="left" class="bar-subheader bar-stable">
        <h3 class="title">adding note for `client name`</h3>
    </ion-header-bar>
    <ion-content class="has-subheader" scroll="false">
        <div class="list padding" style="height: 100%;">
            <textarea placeholder="Comments" style="height: 100%; width: 100%;" ng-model="vm.noteContent"></textarea>
        </div>
    </ion-content>
</ion-modal-view>

初期ビュー

テキスト領域をクリックした後

テキスト領域にフォーカスがあるときにスクロールできることを示します。

まだ問題の人、 @ ajoslin @ adamdbradleyを助けてください

iOSシミュレーター-iPhone6 / iOS 8.3
イオンバージョン1.0.0-rc.0
インストールされているプラ​​グイン：

• com.ionic.keyboard
• com.phonegap.plugins.PushPlugins
• org.apache.cordova.console
• org.apache.cordova.device
• org.apache.cordova.file
• org.apache.cordova.geolocation
• org.apache.cordova.media

モーダルからのHTML：

<ion-modal-view>
  <ion-header-bar>
    <div class="buttons">
      <ion-button class="button button-clear" ng-click="closeModal()">Cancel</ion-button>
    </div>
    <h1 class="title">Modal View</h1>
    <div class="buttons">
      <ion-button class="button button-clear" ng-click="create()">Create</ion-button>
    </div>
  </ion-header-bar>
  <ion-content>    
    <form>
...
</form>
</ion-content>
</ion-modal-view>

@ ravivit9 @ mikehaas763 @AshleyRudland
試してみてください

iOS Notes
If the content of your app (including the header) is being pushed up and out of view on input focus, 
try setting cordova.plugins.Keyboard.disableScroll(true). 
This does not disable scrolling in the Ionic scroll view, 
rather it disables the native overflow scrolling that happens automatically as a result of focusing on inputs below the keyboard.

キーボードiOSノートから

それは魅力のように機能します。

cordova.plugins.Keyboard.disableScroll（true）を設定しても、ビューが入力までスクロールすることを期待できますか？
スクロールを無効にすると、ステータスバーは押し出されなくなりますが、キーボードが入力フィールドと重なっています。

@michaelknochは、入力がスクロールビュー（ion-contentなど）内にある限り、 ionic.keyboard.disable()を呼び出さない限り、自動的にビューにスクロールする必要があります。

@michaelknoch私はあなたがキーボードアタッチを求めていると思います

@LightZamですが、イオンフッターバーのみをサポートしており、入力はイオンビューのコンテンツ内にあります

@tlancinaコンテンツをionScrollでラップする必要がありますか？ http://ionicframework.com/docs/api/directive/ionScroll/

ion-contentはすでにスクロールビューがあるので、 @ michaelknochは必要ありません。 問題を再現する簡単なcodepenを作成でき、使用している電話とOS、およびionic infoコマンドからの出力（CLIを使用している場合）を作成できます。見て。

@tlancina私はこの問題に直面しています
コルドバCLI：5.2.0
Ionicバージョン：1.1.0
Ionic CLIバージョン：1.6.4
Ionic App Libバージョン：0.3.8
ios-deployバージョン：1.7.0
ios-simバージョン：4.1.1
OS：Mac OS XYosemite
ノードバージョン：v0.12.7
Xcodeバージョン：Xcode7.0ビルドバージョン7A176x
電話-iphone4S、ios 7.0.6

「cordova.plugins.Keyboard.disableScroll（true）」ヘッダーを押したままにすると、キーボードがテキスト領域の上に表示されます。 そして私はtextarea（msd-elasticで使用）を内部に保持しました、whatsappのような同様のスタイルを取得するため、その外部イオンコンテンツ

キーボードアタッチを使用すると、msd-elasticで失敗します:(
助言がありますか ？

ionic.Platform.fullScreen（）で試してみました
しかし運がない...また、このfullScreen（）はiOSで別の問題を引き起こします...
それはヘッダーの高さを減らします... fullscreen（）を呼び出すときにこのcssは適用されないので
.platform-ios.platform- cordova：not （.fullscreen）.bar- header：not （.bar-subheader）{高さ：64px; }

evrythingはandoridで大丈夫でした。

Cordovaを6.0.0にアップグレードした後、ほぼ同じ問題が発生します。つまり、フォームフィールドにフォーカスがあると、ステータスバーが表示され、ヘッダーバーと重なります。 この問題は私のAndroidデバイスに存在します。 iOSデバイスはまだ試していません。 誰かplsが助けることができますか？

コルドバCLI：6.0.0
Gulpバージョン：CLIバージョン3.8.11
Gulpローカル：ローカルバージョン3.8.11
イオンバージョン：1.0.0-rc.5
Ionic CLIバージョン：1.7.14
Ionic App Libバージョン：0.7.0
ios-deployバージョン：1.8.3
ios-simバージョン：5.0.4
OS：Mac OS X El Capitan
ノードバージョン：v0.12.2
Xcodeバージョン：Xcode7.2ビルドバージョン7C68

Cordova 6.0.0にアップグレードした後、Androidでこの問題が発生し、プラグインhttps://github.com/mesmotronic/cordova-plugin-fullscreenのAndroidFullScreen.immersiveModeメソッドを呼び出して解決しました

//システムUIを非表示にして非表示のままにします（Android 4.4以降のみ）
AndroidFullScreen.immersiveMode（successFunction、errorFunction）;

この問題はまだ発生しています。アプリは実際には全画面で実行されるべきではないため、全画面で解決することは適切な解決策ではありませんが、テストのために試してみました。アプリは全画面モードになりますが、画面よりもまだ「大きい」ので、ステータスバーの下にあるヘッダーで少しスクロールできます...
助けてください！

この問題がありますか？ 回避策はありますか？

Ionic2のiOSでも同じ問題が発生します

環境
コルドバCLI：6.0.0
イオンバージョン：2.0.0-beta.3
Ionic CLIバージョン：2.0.0-beta.19
Ionic App Libバージョン：2.0.0-beta.9
ios-deployバージョン：インストールされていません
ios-simバージョン：5.0.6
OS：Mac OS X El Capitan
ノードバージョン：v5.7.1
Xcodeバージョン：Xcode7.2.1ビルドバージョン7C1002

ご覧のとおり、Ionicアプリのステータスバーとヘッダーの間にスペース/パディングはありません。

キーボードの新旧の問題が再びここにあります。 テーピングによって入力がフォーカスされているときにスクロールを無効にすることはできますが、仮想キーボードの特別なボタンでフォームフィールドにフォーカスすると、ヘッダーがスクロールして表示されないという古い問題が再び発生します。 Androidキーボードでは、右下に緑色のボタンがあり、フォームの次の入力に切り替えることができます。 スクロールをオフにしている場合でも、ボタンはビューをスクロールしてフォーカスされた入力を表示し、その結果、ヘッダーが画面の外に表示されます。

これをテストするには、最初の入力がビューにあり、キーボードが表示された状態でフォーカスされている必要があり、2番目の入力が折り目の下（キーボードの下のどこか）にある必要があります。 （写真のように）緑色のボタンをタップすると、ビューがスクロールされ、ヘッダーが画面から消えます。

コルドバ6.3.0
ionic-plugin-keyboard 2.2.1
Android5を搭載したデバイスでテスト済み
Android24.0.1用にビルド

このボタンをオフにするか、問題を修正するためのアイデアはありますか？ 100％確信はありませんが、これは、cordovaを6以降のバージョンにアップグレードした後に始まったと思われます。

@rafaellopこの問題は解決しましたか？

この問題は、iOSで電話/カメラ画面からのファイルアップロードを開いたときに表示されます。

メールコンポーザーでこの問題が発生しています

編集すべてを試してもこの問題が解決しない場合は、 cordova-ios @ 4.2.1に戻ってみてください

この問題は私にもまだ発生していますが、これは解決されていません。

IOSでは、ステータスバーをタップすると、IONIC2でイオンコンテンツ全体が点滅します。この問題を解決する方法を提案してください。
ありがとうございました。

悲しいことに、 cordova-ios @ 4.2.1に戻っても

別の投稿から、cordova-statusbarプラグインを2.2.1から2.2.0にダウングレードでき、問題が修正されたことに気づきました。 私の場合、問題を引き起こしているのはステータスバープラグインのようです。

私はこの問題を抱えていました

• イオン3.9.2
• cordova-ios 4.4.0
• iOS 10.3
• iPhoneデバイスとエミュレーターの品揃え

height: 100%; （すべてイオンコンテンツ）のテキストエリアがあり、テキストエリアにフォーカスがあるたびにイオンヘッダーがズームアウトしていました。 私の修正は、それをheight: auto; min-height: 25%;に変更し、テキスト領域をheight: 100%; margin: 0; padding: 0;と(click)=focusTextArea() div内に配置すること

このプラグインを使用してください。ioniccordovapluginadd cordova-plugin-ionic-webview--save。 それは私の問題を解決しましたありがとう

email-composerプラグインと組み合わせて同じ問題が発生しました。

cordova-plugin-statusbarをバージョン2.2.1から2.3.0にアップグレードすることで、この問題を解決しました。

@ jvhe123試してみましたが、v2.3.0が存在しないようですが、v2.2.3のことですか？

@ glenr4

• cordova-プラグイン-キーボード1.2.0
• ionic-plugin-keyboard 2.2.1

私はiPhoneXでこの問題を抱えていました。キーボードを開くと、ヘッダーが押し上げられ、ほとんどページから外れました。

影響を受けるページのjavaScriptファイルにeventListenerを配置することで、これを修正しました。

document.addEventListener('deviceready', function(e){ window.addEventListener('native.keyboardshow', function () { cordova.plugins.Keyboard.disableScroll(true); }); });

これは私にとってはうまくいきました、うまくいけばあなたの一人にとってもうまくいくでしょう。

問題をありがとう！ この問題は、元の問題に関連しないコメントを防ぐためにロックされています。 これが最新バージョンのIonicで引き続き問題になる場合は、新しい問題を作成し、テンプレートが完全に入力されていることを確認してください。