Wie man das iOS 11 Eingabeelement in Fixed Modals repariert Bug

Ein Fehler in HTML-Eingaben in der neu veröffentlichten iOS 11 verursacht Probleme für Websites, die Eingabeelemente in festen Containern haben. Hier ist genau was passiert und einige mögliche Umgehungslösungen.Wie man das iOS 11 Eingabeelement in Fixed Modals repariert Bug

Wenn Sie einen in einem festen Container haben und er nahe genug am unteren Bildschirmrand ist, um den Browser zu scrollen, um Platz für die Tastatur zu schaffen, wird der Cursor außerhalb der Texteingabe platziert. Dies war ein kritisches Problem für uns, da eine unserer Kernfunktionen auf der Benutzereingabe durch einen festen modalen Dialog beruht.

Dies war ein kritisches Problem für uns, da eine unserer Kernfunktionen auf der Benutzereingabe durch einen festen modalen Dialog beruht.

Quelle

2017-10-04 Amjad Jafar

Ich bin mir nicht sicher, ob dies genau das gleiche Problem ist, dass Sie konfrontiert sind, aber diese Lösung funktionierte für mich:

.modal-open {position: fixed;}

iOS 11 Safari bootstrap modal text area outside of cursor

Quelle

2017-10-09 20:33:09

ich hatte das gleiche Problem, einen Blick auf meine Antwort nehmen, vielleicht wird es Ihnen helfen: https://stackoverflow.com/a/46954486/8775824

Quelle

2017-10-26 12:42:26 Dan

Diese Lösung hat mir geholfen, IOS11 Eingang Problem zu beheben: https://bitbucket.org/snippets/OlegChulakovStudio/RgBX8x

Es behebt auch störenden Hintergrund blättern, wenn Sie versuchen, innerhalb modal zu blättern :)

Zusammenfassung: Sie fügen position: fixed zum Körper, Bargeld Fenster .pageYOffset und blättert nach dem Schließen des Popup-Fensters zur gehärteten Position, um eine Bewegung auf die Seite nach oben zu verhindern.

Quelle

2017-11-03 10:10:51

Ich hatte diese iOS-Bugg mit einem Login-Formular in einem fixed Header/Banner-Element. Es gibt eine button in der Kopfzeile, um das modale Fenster mit dem Login-Formular zu öffnen. Das aktuelle modale Fenster ist absolute positioniert, aber das Header/Banner-Element ist fixed.

Ich löste es ziemlich einfach mit nur ein paar Zeilen Code. Also was ich tue, ist, dass ich den fixed Container zu absolute ändere, aber nur wenn das Login-Formular offen ist, macht es die Magie mit dem Eingabemarker.

jQuery:

$('.ios #mob-login').on('click', function(){ 
    $('body').toggleClass('login-open'); 
});

CSS:

.ios body.login-open #banner-wrapper { 
    position: absolute; 
}

So, jetzt die festen Header wird absolut. Wenn es iOS ist und nur wenn die Login-Box geöffnet ist.

Dies könnte Ihr Problem lösen, wenn Sie ähnliche Probleme haben.

Ps. Sie benötigen ein Skript, um den Klassennamen ios/ios11 zu oder ähnlich zu erkennen und zu schreiben, aber ich gehe in diesem Beitrag nicht darauf ein. Sie können viele Lösungen dafür finden.

Quelle

2017-11-17 12:00:32 JoakimB

Für jetzt gibt es keine perfekte Lösung dafür.Zwei temporäre Optionen:

ändern Dialog/Modal position: absolute (nicht empfohlen)
Versuchen Hintergrund Scrollen zu entfernen, wenn Modal/Dialog öffnet sich und es wiederherstellen, wenn Dialog schließen.

Details für Option 2: Zum Beispiel können Sie Ihre Wurzel div gesetzt (oder was auch immer das hat eine Scrollbar) als overflowY='hidden' wenn Dialog öffnet sich, und es zurück overflowY='' wenn Dialog geschlossen ändern. (Nachteil: Browser wird gescrollt nach oben, wenn Sie einem offenen Dialog/modal)

Hinweis:

Erinnern O/Browser zu erkennen, wenn Trigger-Fixes, sonst werden Sie wahrscheinlich Problem in IE begegnen.
Folgen Sie this thread, um das neueste Update zu diesem Problem zu erhalten.

Quelle

2017-11-18 09:32:40 Ming

Vielen Dank für Interesse, aber "Überlauf" funktioniert nicht auf ipad Safari Browser und ich arbeite auf dynamischen Seiten, so gibt es keine Begrenzung der Seitenlänge und "Position: absolute" nie an ihnen arbeiten. –

Gleiches Problem vorher. Auch behoben durch Einstellung von "Position: Absolut" – iplus26

dieses Probieren Sie es kann Ihnen helfen,

//HTML 
<head> 
    <style> 
      .ios-11-body-fixed { 
      position: fixed; 
      width: 100%; 
      } 
    </style> 
</head> 

//jQuery 
$("#leadgen-modal").on('show.bs.modal', function() { 
    $('body').addClass('ios-11-body-fixed'); 
}); 
$('#leadgen-modal').on('hidden.bs.modal', function() { 
      $('body').removeClass('ios-11-body-fixed'); 
});

Quelle

2017-12-19 09:41:11

Vielen Dank für Ihre Hilfe! aber in meinem Szenario funktioniert es nicht 100%, da ich sehr lange dynamische Seiten habe und wenn du 'position: fixed' zum Körper hinzufügst, scrollt es jedes Mal nach oben, egal wie ich es mit einer dynamischen Höhe geschafft habe jquery 'Funktion, aber es ist auch in einigen Szenarien fehlgeschlagen. –

Diese Lösung hat mir geholfen, in jedem IOS-Modell zu beheben.

Das erste Ziel nur IOS-Geräte mit diesem Code.

//target ios 
var isMobile = { 
    iOS: function() { 
     return navigator.userAgent.match(/iPhone|iPad|iPod/i); 
    } 
} 
if(isMobile.iOS()) { 
     jQuery('body').addClass('apple-ios'); 
}

dann setzen Sie diesen Code in Ihre CSS:

body.apple-ios.modal-open { 
    position: fixed; 
    width:100%; 
}

Wenn Sie Wordpress und Cache-Plugin verwenden, müssen Sie alle den Cache leeren.

Ich hoffe, dies hilft Ihnen.

Quelle

2018-03-07 07:21:27

Wie man das iOS 11 Eingabeelement in Fixed Modals repariert Bug

Antwort

Verwandte Themen