0

I'm create a web form, that has one custom input field with type "text".

CSS looks like

input {
height: 39px;
font-size: 14px;
color: #fff;
background: #000000 url(../img/search-bg-white.png) no-repeat 95% center;
border: none;
padding: 0 50px 0 10px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}

When I tap on it at iPhone 6 all elements are desapiare exluding form elements without this input

And the result is http://gyazo.com/790da935bbfc946420cd37a24b2302db and I don't understand what to do

4

2 に答える 2

0

さまざまな iOS 8 以降の Web ビュー アプリケーションで、多数の要素の消失、奇妙なスクロール動作、およびキーボードの問題が発生するのを見てきました。この問題は、スクロール可能な要素内への入力の埋め込み、またはスクロール可能な要素とページ上の他の要素の組み合わせに関連しているようです。(私が目にする動作は、入力のあるページで常に発生するとは限らないため、上記の @Josh Crozier の回答は、私の場合は 100% の時間で機能します。)

私が見つけた解決策は、ページがレンダリングされるまで待ってから、スクロール要素の z-index を調整することでした。これにより、レンダリング エンジンにレイヤーの再描画を強制していると推測されます。

これが機能するかどうかをテストするには、開発者の Mac に USB で接続された iPhone 6 にページをロードし、Safari でページを調べてみてください。入力フィールドをタップする直前に、Safari 開発ツールを使用して、スクロール可能な親コンテナーの z-index を調整します (存在しない場合は z-index を追加します)。次に、フィールドをタップして、それが引き続き問題になるかどうかを確認します。問題が発生しない場合は、レンダリング後にページの再描画/再レイアウト/再ウィズルを強制するために、JavaScript をページに添付する必要があります。

幸運を。:\

于 2015-02-10T18:01:48.313 に答える
0

このバグの解決策を見つけました。body 要素の css プロパティ -webkit-overflow-scrolling: touch を配置し、それを削除すると、すべて正常に動作します。

于 2015-02-23T08:10:15.347 に答える