iOS 11 Fixed Modal Bug

Question

Ich habe ein festes Modal mit scrollbarem Inhalt und einigen Eingabefeldern. Ich habe ein Problem, bei dem ich mich auf ein Eingabefeld konzentriere, das die Tastatur öffnet und dann blättert. Es scheint, dass die DOM-Elemente im Vergleich zu dem, was tatsächlich auf dem Bildschirm gerendert wird, falsch ausgerichtet sind. Sehen Sie den Screenshot - der hervorgehobene Bereich sollte dort sein, wo der Fortfahren-Button ist. Das bedeutet, dass ich nicht wie erwartet auf "Weiter" klicken kann.

Ich dachte, dies könnte das Problem sein, aber die Fehlerbehebung scheint nicht vollständig funktioniert (immer noch auf iPhone X gebrochen).

Hat jemand anderes dieses Problem oder eine Lösung gefunden?

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

Answer 1

Ja, ich habe diesen Fehler erfahren. Obwohl nicht perfekt, und es wird nicht für jede Website arbeiten, Cursor ist immer noch ein wenig heraus, aber es ist zumindest innerhalb des Eingabefeldes und Sie können zwischen den Feldern überspringen ... hier ist meine Lösung ...

Es auch hilft, das modale 100% Breite zu machen.

Ich habe für Updates ein Update in iOS diesen Thread folgenden selbst, scheint es nahe zu kommen - 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; 
} 
}