iOS 11固定モーダルバグ

Question

スクロール可能なコンテンツと入力フィールドがいくつかある固定モーダルです。私は入力フィールドに焦点を当て、キーボードをポップアップしてスクロールする問題が発生しています。 DOM要素が実際に画面にレンダリングされているものと比べて整列していないようです。 スクリーンショットを見る - 強調表示された領域は、続行ボタンがある場所でなければなりません。これは、期待どおりに続行をクリックできないことを意味します。

私はこれが問題かもしれないと思ったが、修正は完全には機能していないようだ（まだiPhone Xでは壊れている）。

他の誰かがこの問題に遭遇したのですか？

hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8

Answer 1

はい、私はこのバグを経験しました。完全ではありませんが、すべてのサイトで動作しませんが、カーソルはまだ少しですが、少なくとも入力フィールド内にあり、フィールド間をスキップすることができます...

モーダル100％の幅を作るのに役立ちます。

私はiOSのそれ自体修正のアップデートについては、このスレッドを追ってきた、それが近くなってきたように思える - https://bugs.webkit.org/show_bug.cgi?id=176896

@media 
only screen /* iPhone X */ 
and (device-width : 375px) 
and (device-height : 812px) 
and (-webkit-device-pixel-ratio : 3), 
only screen /* iPhone 8 */ 
and (device-width : 375px) 
and (device-height : 667px) 
and (-webkit-device-pixel-ratio : 2), 
only screen /* iPhone 8 Plus */ 
and (device-width : 414px) 
and (device-height : 736px) 
and (-webkit-device-pixel-ratio : 3), 
only screen /* iPhone 7 */ 
and (min-device-width : 375px) 
and (max-device-width : 667px), 
only screen /* iPhone 7 Plus */ 
and (min-device-width : 414px) 
and (max-device-width : 736px), 
only screen /* iPhone 6 */ 
and (min-device-width : 375px) 
and (max-device-width : 667px), 
only screen /* iPhone 6 Plus */ 
and (min-device-width : 414px) 
and (max-device-width : 736px), 
only screen /* iPhone 5 & 5S */ 
and (min-device-width : 320px) 
and (max-device-width : 568px), 
only screen /* iPad */ 
and (min-device-width : 768px) 
and (max-device-width : 1024px), 
only screen /* iPad 3 and 4 */ 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 2), 
only screen /* iPad 1 and 2 */ 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1), 
only screen /* iPad Mini */ 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1) { 
html,body { 
-webkit-overflow-scrolling : touch !important; 
overflow: auto !important; 
height: 100% !important; 
} 
}