Ich habe eine mobile Website, deren Div über Position am unteren Bildschirmrand befestigt ist: behoben. In iOS 5 (ich teste auf einem iPod Touch) funktioniert alles einwandfrei, bis ich auf einer Seite mit einem Formular bin. Wenn ich auf ein Eingabefeld tippe und die virtuelle Tastatur angezeigt wird, geht plötzlich die feste Position meines Div verloren. Das div scrollt jetzt mit der Seite, solange die Tastatur sichtbar ist. Sobald ich auf Fertig klicke, um die Tastatur zu schließen, kehrt der Div zu seiner Position am unteren Bildschirmrand zurück und befolgt die Position: Feste Regel.
Hat jemand anderes diese Art von Verhalten erlebt? Wird das erwartet? Vielen Dank.
Antworten:
Ich hatte dieses Problem in meiner Bewerbung. So arbeite ich daran:
Ich scrolle nur nach oben und positioniere es dort, damit der iOS-Benutzer nichts Merkwürdiges bemerkt. Schließen Sie dies in die Erkennung von Benutzeragenten ein, damit andere Benutzer dieses Verhalten nicht erhalten.
quelle
document.body.scrollTop = 0
wenn Sie jQuery nicht verwenden und auf die neuesten Browser abzielen.$(window).scrollTop(0);
dazu führen, dass die fokussierte Eingabe vom Bildschirm verschoben wird, z. B. eine Eingabe weiter unten auf der Seite oder wenn sich ein iPhone im Hochformat befindet. Eine bessere Lösung ist dieheader.css({position:'absolute',top:window.pageYOffset+'px'});
Fokussetzung und die Unschärfeheader.css({position:'fixed',top:0});
.Ich hatte ein etwas anderes iPad-Problem, bei dem die virtuelle Tastatur mein Ansichtsfenster außerhalb des Bildschirms nach oben schob. Nachdem der Benutzer die virtuelle Tastatur geschlossen hatte, befand sich mein Ansichtsfenster immer noch außerhalb des Bildschirms. In meinem Fall habe ich so etwas gemacht:
quelle
Dies ist der Code, mit dem wir das Problem mit dem iPad beheben. Grundsätzlich werden Diskrepanzen zwischen Versatz und Bildlaufposition erkannt - was bedeutet, dass "fest" nicht richtig funktioniert.
quelle
Die positionfesten Elemente aktualisieren ihre Position einfach nicht, wenn die Tastatur geöffnet ist. Ich habe festgestellt, dass sich die Elemente neu positionieren, wenn Safari zu der Annahme verleitet wird, dass die Größe der Seite geändert wurde. Es ist nicht perfekt, aber zumindest müssen Sie sich keine Gedanken darüber machen, ob Sie in die Position „absolut:“ wechseln und Änderungen selbst verfolgen.
Der folgende Code wartet nur darauf, wann der Benutzer wahrscheinlich die Tastatur verwendet (aufgrund einer fokussierten Eingabe), und bis er eine Unschärfe hört, wartet er nur auf Bildlaufereignisse und führt dann den Größenänderungstrick aus. Scheint bisher ziemlich gut für mich zu funktionieren.
quelle
Nur für den Fall, dass jemand auf diesen Thread stößt, wie ich es bei der Untersuchung dieses Problems getan habe. Ich fand diesen Thread hilfreich, um mein Denken zu diesem Thema anzuregen.
Dies war meine Lösung für ein aktuelles Projekt. Sie müssen nur den Wert von "targetElem" in einen jQuery-Selektor ändern, der Ihren Header darstellt.
Es gibt eine kleine Verzögerung bei der Korrektur, da iOS die DOM-Manipulation stoppt, während es gescrollt wird, aber es macht den Trick ...
quelle
init
in eine reguläre Funktion (nicht selbstaufrufend; sie wird zu früh ausgelöst ). Rufen Sie danniOSKeyboardFix.init();
kurz vor dem Ende derif
Anweisung auf.Keine der anderen Antworten, die ich für diesen Fehler gefunden habe, hat für mich funktioniert. Ich konnte es einfach beheben, indem ich die Seite um 34 Pixel nach oben scrollte. Der Betrag, um den die mobile Safari nach unten scrollt. mit jquery:
Dies wird natürlich in allen Browsern wirksam, verhindert jedoch, dass es in iOS kaputt geht.
quelle
Dieses Problem ist wirklich ärgerlich.
Ich habe einige der oben genannten Techniken kombiniert und mir Folgendes ausgedacht:
Ich habe zwei feste Navigationsleisten (Kopf- und Fußzeile mit Twitter-Bootstrap). Beide verhielten sich seltsam, wenn die Tastatur hoch und wieder komisch, wenn die Tastatur heruntergefahren ist.
Mit diesem zeitgesteuerten / verzögerten Fix funktioniert es. Hin und wieder finde ich immer noch einen Fehler, aber er scheint gut genug zu sein, um ihn dem Kunden zu zeigen.
Lassen Sie mich wissen, ob dies für Sie funktioniert. Wenn nicht, können wir vielleicht etwas anderes finden. Vielen Dank.
quelle
Ich hatte das gleiche Problem mit iOS7. Unten festgelegte Elemente würden meine Ansicht durcheinander bringen und nicht richtig fokussieren.
Alle haben angefangen zu arbeiten, als ich dieses Meta-Tag zu meinem HTML-Code hinzugefügt habe.
Der Teil, der den Unterschied machte, war:
Hoffe das hilft jemandem.
quelle
Ich habe die
Jory Cunningham
Antwort genommen und verbessert:In vielen Fällen ist es nicht nur ein Element, das verrückt wird, sondern mehrere fest positionierte Elemente. In diesem Fall
targetElem
sollte es sich also um ein jQuery-Objekt handeln, das alle festen Elemente enthält, die Sie "reparieren" möchten. Ho, dies scheint die iOS-Tastatur verschwinden zu lassen, wenn Sie scrollen ...Natürlich sollten Sie dieses AFTER- Dokumentereignis
DOM ready
oder kurz vor dem schließenden</body>
Tag verwenden.quelle
Ich habe eine ähnliche Lösung wie @NealJMD, außer dass meine nur für iOS ausgeführt wird und den Bildlaufversatz korrekt ermittelt, indem das scollTop vor und nach dem nativen Tastatur-Bildlauf gemessen wird und setTimeout verwendet wird, um das native Bildlauf zu ermöglichen:
quelle
Ich habe die feste Position meines iPad-Hauptlayoutinhalts folgendermaßen festgelegt:
quelle
setInterval
... Ja wirklich? Es ist besser, einfach bei dem Fehler zu bleiben, als dies zu tunIch hatte ein ähnliches Problem wie @ ds111 s. Meine Website wurde von der Tastatur nach oben gedrückt, bewegte sich jedoch nicht nach unten, als die Tastatur geschlossen wurde.
Zuerst habe ich @ ds111 Lösung ausprobiert, aber ich hatte zwei
input
Felder. Natürlich verschwindet zuerst die Tastatur, dann passiert die Unschärfe (oder so ähnlich). Der zweiteinput
befand sich also unter der Tastatur, als der Fokus direkt von einem Eingang zum anderen wechselte.Außerdem war das "Hochspringen" für mich nicht gut genug, da die gesamte Seite nur die Größe des iPad hat. Also habe ich die Schriftrolle glatt gemacht.
Schließlich musste ich den Ereignis-Listener an alle Eingaben anhängen, auch an diejenigen, die derzeit verborgen waren, daher die
live
.Alles in allem kann ich das folgende Javascript-Snippet wie folgt erklären: Hängen Sie den folgenden Listener für Unschärfeereignisse an die aktuelle und alle zukünftigen an
input
undtextarea
(=live
): Warten Sie eine Nachfrist (=window.setTimeout(..., 10)
) und scrollen Sie reibungslos nach oben (=animate({scrollTop: 0}, ...)
), aber nur, wenn "keine Tastatur vorhanden ist" gezeigt "(=if($('input:focus, textarea:focus').length == 0)
).Beachten Sie, dass die Kulanzfrist (=
10
) möglicherweise zu kurz ist oder die Tastatur weiterhin angezeigt wird, obwohl keineinput
odertextarea
fokussiert ist. Wenn Sie schneller oder langsamer scrollen möchten, können Sie natürlich die Dauer (=400
) anpassen.quelle
Ich habe wirklich hart gearbeitet, um diese Problemumgehung zu finden, die kurz nach Fokus- und Unschärfeereignissen für Eingaben sucht, und durch Scrollen, um die Position des festen Balkens selektiv zu ändern, wenn die Ereignisse eintreten. Dies ist kugelsicher und deckt alle Fälle ab (Navigieren mit <>, Scrollen, Fertig-Schaltfläche). Hinweis id = "nav" ist meine feste Fußzeile div. Sie können dies einfach auf Standard-js oder jquery portieren. Dies ist ein Dojo für diejenigen, die Elektrowerkzeuge benutzen ;-)
define (["dojo / ready", "dojo / query",], function (ready, query) {
}); // Ende definieren
quelle
overflow:hidden
Regel hat, wird Ihre Eingabe überhaupt nicht angezeigt, da sie sich jetzt außerhalb des Rahmens befindet.Dies ist ein schwieriges Problem, um "richtig" zu machen. Sie können versuchen, die Fußzeile im Fokus des Eingabeelements auszublenden und bei Unschärfe anzuzeigen, aber das ist unter iOS nicht immer zuverlässig. Von Zeit zu Zeit (etwa jedes zehnte Mal auf meinem iPhone 4S) scheint das Fokusereignis nicht zu feuern (oder es liegt möglicherweise eine Rennbedingung vor), und die Fußzeile wird nicht ausgeblendet.
Nach langem Ausprobieren kam ich auf diese interessante Lösung:
Im Wesentlichen: Verwenden Sie JavaScript, um die Fensterhöhe des Geräts zu bestimmen, und erstellen Sie dann dynamisch eine CSS-Medienabfrage, um die Fußzeile auszublenden, wenn die Fensterhöhe um 10 Pixel verkleinert wird. Da das Öffnen der Tastatur die Größe der Browseranzeige ändert, schlägt dies unter iOS nie fehl. Da die CSS-Engine anstelle von JavaScript verwendet wird, ist sie auch viel schneller und flüssiger!
Hinweis: Ich habe festgestellt, dass die Verwendung von "Sichtbarkeit: versteckt" weniger fehlerhaft ist als "Anzeige: keine" oder "Position: statisch", aber Ihr Kilometerstand kann variieren.
quelle
Funktioniert bei mir
quelle
In unserem Fall würde sich dies von selbst beheben, sobald der Benutzer einen Bildlauf durchführt. Dies ist also der Fix, mit dem wir einen Bildlauf
blur
auf eineminput
oder simuliert habentextarea
:quelle
Meine Antwort ist, dass es nicht geht.
Ich sehe 25 Antworten, aber in meinem Fall funktioniert keine. Aus diesem Grund verbergen Yahoo und andere Seiten den festen Header, wenn die Tastatur eingeschaltet ist. Und Bing macht die ganze Seite nicht scrollbar (Überlauf-y: versteckt).
Die oben diskutierten Fälle sind unterschiedlich, einige haben Probleme beim Scrollen, andere auf Fokus oder Unschärfe. Einige haben eine feste Fußzeile oder Kopfzeile. Ich kann jetzt nicht jede Kombination testen, aber Sie werden möglicherweise feststellen, dass dies in Ihrem Fall nicht möglich ist.
quelle
Fand diese Lösung auf Github.
https://github.com/Simbul/baker/issues/504#issuecomment-12821392
Stellen Sie sicher, dass Sie scrollbaren Inhalt haben.
Die Adressleiste wird als zusätzlicher Bonus ausgeklappt.
quelle
Für den Fall, dass jemand dies versuchen wollte. Ich habe folgendes für mich an einer festen Fußzeile mit einem Eingabefeld arbeiten lassen.
quelle
Ich habe das gleiche Problem. Aber ich habe festgestellt, dass die feste Position nur verzögert und nicht gebrochen ist (zumindest für mich). Warten Sie 5-10 Sekunden und prüfen Sie, ob sich das div wieder am unteren Bildschirmrand befindet. Ich glaube, es ist kein Fehler, sondern eine verzögerte Antwort, wenn die Tastatur geöffnet ist.
quelle
Ich habe alle Ansätze aus diesem Thread ausprobiert, aber wenn sie nicht geholfen haben, haben sie es noch schlimmer gemacht. Am Ende habe ich beschlossen, das Gerät zu zwingen, den Fokus zu verlieren:
und es funktionierte wie ein Zauber und reparierte mein klebriges Login-Formular.
Bitte beachten Sie :
jQuery v1.10.2
quelle
Dies ist immer noch ein großer Fehler für alle HTML-Seiten mit höheren Bootstrap-Modalen in iOS 8.3. Keine der vorgeschlagenen Lösungen , die oben gearbeitet und nach in unter der Falte eines hohen modalen auf ein beliebiges Feld Zoomen, Mobile Safari und / oder WkWebView würden die festen Elemente, wo die HTML Körpers Scroll lag, sie bewegen lassen versetzt mit , wo sie eigentlich , wo ausgelegt.
Fügen Sie einen Ereignis-Listener zu Ihren modalen Eingaben hinzu, um den Fehler zu umgehen, z. B.:
Ich vermute, dass dies funktioniert, weil durch Erzwingen der Bildlaufhöhe des HTML-Körpers die tatsächliche Ansicht an der Stelle neu ausgerichtet wird, an der iOS 8 WebView den Inhalt des festen modalen Div erwartet.
quelle
Wenn jemand nach einer völlig anderen Route gesucht hat (als ob Sie dieses "Fuß" -Div beim Scrollen nicht einmal anheften möchten, sondern nur möchten, dass das Div am Ende der Seite bleibt), können Sie einfach die Fußzeilenposition als festlegen relativ.
Das bedeutet, dass selbst wenn die virtuelle Tastatur in Ihrem mobilen Browser angezeigt wird, Ihre Fußzeile nur am Ende der Seite verankert bleibt und nicht versucht, auf die Anzeige oder das Schließen der virtuellen Tastatur zu reagieren.
Natürlich sieht es auf Safari besser aus, wenn die Position festgelegt ist und die Fußzeile der Seite folgt, während Sie nach oben oder unten scrollen. Aufgrund dieses seltsamen Fehlers in Chrome haben wir jedoch darauf umgestellt, nur die Fußzeile relativ zu machen.
quelle
Keine der Bildlauflösungen schien für mich zu funktionieren. Stattdessen haben Sie die Position des Körpers auf fest gesetzt, während der Benutzer Text bearbeitet, und ihn dann statisch wiederhergestellt, wenn der Benutzer fertig ist. Dies verhindert, dass Safari Ihre Inhalte auf Sie scrollt. Sie können dies entweder auf Fokus / Unschärfe der Elemente tun (siehe unten für ein einzelnes Element, aber für alle Eingaben, Textbereiche), oder wenn ein Benutzer etwas unternimmt, um mit der Bearbeitung zu beginnen, wie das Öffnen eines Modals es auf diese Aktion (zB modales Öffnen / Schließen).
quelle
iOS9 - das gleiche Problem.
TLDR - Quelle des Problems. Scrollen Sie zur Lösung nach unten
Ich hatte ein Formular in einem
position:fixed
Iframe mit id = 'subscribe-popup-frame'Gemäß der ursprünglichen Frage wird der Iframe beim Eingabefokus an den oberen Rand des Dokuments und nicht an den oberen Bildschirmrand verschoben.
Das gleiche Problem trat im Safari-Entwicklungsmodus nicht auf, wenn der Benutzeragent auf ein Gerät eingestellt war. Es scheint also, dass das Problem durch die virtuelle iOS-Tastatur verursacht wird, wenn sie angezeigt wird.
Ich bekam einen Einblick in das Geschehen, indem
$('#subscribe-popup-frame', window.parent.document).position()
ich die Position des Iframes (z. B. ) auf der Konsole protokollierte, und von dort aus konnte ich sehen, dass iOS die Position des Elements auf den{top: -x, left: 0}
Zeitpunkt einstellte, an dem die virtuelle Tastatur auftauchte (dh sich auf das Eingabeelement konzentrierte).Meine Lösung bestand also darin, dieses lästige Problem zu lösen
-x
, das Vorzeichen umzukehren und es dann mit jQuery hinzuzufügentop
Position wieder zum Iframe . Wenn es eine bessere Lösung gibt, würde ich sie gerne hören, aber nachdem ich ein Dutzend verschiedene Ansätze ausprobiert habe, war es die einzige, die für mich funktioniert hat.Nachteil: Ich musste eine Zeitüberschreitung von 500 ms einstellen (vielleicht würde weniger funktionieren, aber ich wollte sicher sein), um sicherzustellen, dass ich den endgültigen
x
Wert erfasst habe , nachdem iOS seinen Fehler mit der Position des Elements gemacht hatte. Infolgedessen ist die Erfahrung sehr ruckelig. . . aber zumindest funktioniert esLösung
Dann rufen Sie einfach so
mobileInputReposition
etwas wie$('your-input-field).focus(function(){})
und an$('your-input-field).blur(function(){})
quelle