Bei der Safari mit iOS 11 befindet sich der Eingabe-Textfeld-Cursor außerhalb des Eingabe-Textfelds. Wir haben nicht verstanden, warum es dieses Problem gibt. Wie Sie sehen können, ist mein fokussiertes Textfeld eine E-Mail-Texteingabe, aber mein Cursor befindet sich außerhalb davon. Dies geschieht nur mit iOS 11 Safari
html
ios
bootstrap-modal
mobile-safari
ios11
Kekkeme
quelle
quelle
Antworten:
Ich habe das Problem behoben, indem ich
position:fixed
den Körper beim Öffnen eines Modals erweitert habe. Hoffe das wird dir helfen.quelle
width:100%
, um die Körperbreite auf die Gerätebreite zu beschränken. In einigen Fällen kann dies je nach vorhandenem Markup ein Problem sein. Ich mag auch die Lösung von @gentleboy (unten), um andere Browser nicht ohne Probleme zu bestrafen, denn wenn der Körper auf fest eingestellt wird, rollt der Körper nach oben, was etwas ärgerlich ist.position:fixed
beim Hauptteil des Antrags beworben. Stattdessen habe ich es inposition:absolute
dashtml
Element geändert und mein Problem behoben. Danke Jen!Scrollen Sie persönlich
position: fixed
automatisch nach oben . Ziemlich nervig !Um andere Geräte und Versionen nicht zu bestrafen, wende ich diesen Fix nur auf die entsprechenden Versionen von iOS an.
** VERSION 1 - Alle Modalitäten behoben **
Für das Javascript / jQuery
Für das CSS
** VERSION 2 - Nur ausgewählte Modalitäten **
Ich habe die Funktion so geändert, dass sie nur für ausgewählte Modalitäten mit einer Klasse ausgelöst wird
.inputModal
Nur die Modalitäten mit Eingängen sollten beeinflusst werden, um ein Scrollen nach oben zu vermeiden.
Für das Javascript / jQuery
Für das CSS
Für den HTML- Code Fügen Sie die Klasse inputModal zum Modal hinzu
Nota bene Die Javascript-Funktion ruft jetzt selbst auf
** UPDATE iOS 11.3 - Fehler behoben 😃🎉 **
Ab iOS 11.3 wurde der Fehler behoben. Es besteht keine Notwendigkeit, auf
OS 11_
in zu testeniOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);
Seien Sie jedoch vorsichtig, da iOS 11.2 immer noch weit verbreitet ist (Stand April 2018). Sehen
stat 1
stat 2
quelle
iOS11 = /OS 11_(\d{1,2})(_{0,1})(\d{1,2})/.test(us);
ios11 = /OS 11_(\d{1,2})/.test(ua);
Dieses Problem geht über Bootstrap und nur über Safari hinaus. Es ist ein vollständiger Anzeigefehler in iOS 11, der in allen Browsern auftritt. Das obige Update behebt dieses Problem nicht in allen Fällen.
Der Fehler wird hier ausführlich gemeldet:
https://medium.com/@eirik.luka/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8
Angeblich haben sie es Apple bereits als Fehler gemeldet.
quelle
Frustrierender Fehler, danke, dass Sie ihn identifiziert haben. Andernfalls würde ich mein iPhone oder meinen Kopf gegen die Wand schlagen.
Die einfachste Lösung ist (1 Zeile Codeänderung):
Fügen Sie einfach das folgende CSS zum HTML-Code oder zu einer externen CSS-Datei hinzu.
Hier ist ein voll funktionsfähiges Beispiel:
Ich habe hier ein Problem eingereicht: https://github.com/twbs/bootstrap/issues/24059
quelle
Einfachste / sauberste Lösung:
quelle
Dieses Problem ist nach dem Update Ihrer Apple-Geräte auf iOS 11.3 nicht mehr reproduzierbar
quelle
Hinzufügen
position: fixed;
,body
wenn Modal geöffnet ist.quelle
Diese Lösungen, die eine
position: fixed
Positionskorrektur basierend auf derscrollTop
Arbeit verwenden, funktionieren sehr gut, aber einige Leute (einschließlich ich) haben ein anderes Problem: Tastatur-Caret / Cursor werden nicht angezeigt, wenn die Eingaben fokussiert sind.Ich beobachtete , dass caret / Cursor funktioniert nur , wenn wir NICHT DO verwenden
position: fixed
auf Körper. So , nachdem einige Dinge versuchen, gab ich auf mit diesem Ansatz und zur Verwendung entschiedenposition: relative
aufbody
und die Nutzung ,scrollTop
um eine korrekte modalen Spitzenposition statt.Siehe Code unten:
quelle
Wie bereits erwähnt: die Einstellung
style.position
property
vonbody
bisfixed
löst dasiOS cursor misplacement
Problem.Dieser Gewinn geht jedoch zu Lasten eines gewaltsamen Bildlaufs zum oberen Rand der Seite.
Glücklicherweise kann dieses neue
UX
Problem ohne großen Aufwand durch die Nutzung vonHTMLElement.style
und behoben werdenwindow.scrollTo()
.Das Wesentliche ist, dem entgegenzuwirken,
scroll to top
indem man das Wann desbody
Elements manipuliert . Dies erfolgt anhand des von der Variablen erfassten Werts .style.top
mounting
YOffset
ygap
Von dort ist es nur darum , die zum Zurücksetzen
body's
style.top
auf0
und Reframing der Sicht des Benutzers verwenden ,window.scrollTo(0, ygap)
wenndismounting
.Unten finden Sie ein praktisches Beispiel.
quelle
functions
wennmounting
unddismounting
. Vielen Dank.Falls jemand nach einem Fix in Vanilla JS sucht, der unter IOS> 11.2 funktioniert und kein zusätzliches CSS erfordert:
Was dies tut ist:
focusin
Ereignisse auf der Seiteinput
oder ein Element isttextarea
und in einem Element mitfixed
Position enthalten ist, ändern Sie die Position des Containers inabsolute
Bezug aufscrollTop
die ursprünglichen Abmessungen des Containers.fixed
.quelle
Diese Lösung hat bei mir funktioniert und funktioniert in allen Browsern unter iOS.
JavsScript
quelle
Haben Sie versucht, viewport-fit = cover für das Meta-Viewport.
Schauen Sie sich das an: https://ayogo.com/blog/ios11-viewport/
quelle
Überschreiben Sie modales CSS und ändern Sie es
position
vonfixed
nachabsolute
quelle
zur # modal Position hinzufügen: absolut behebt zukünftige Probleme im Zusammenhang mit der Position: behoben
quelle