fixed-position-div friert auf der Seite (iPad)
Habe ich eine asp.net web site ich bin Gebäude werden unterstützt ipad. Wenn ich den Fokus auf ein input-element und die Tastatur eingeblendet, die position fixed header-div(was normalerweise scrollt mit der Seite) öffnet sich die Seite mit einem Abstand entspricht dem Betrag, der die Tastatur aufnimmt, und frieren Sie es für die Dauer des input-Prozess. Sobald die Tastatur gefallen ist wieder nach unten, die div einrastet wieder an seinen Platz und verhält sich wieder normal. Ich Teste auf iOS5, also position: fixed unterstützt werden sollte.
Ist das ein bekanntes Problem? Hat jemand in dieser und befasste sich mit ihm vor? Ich kann nicht scheinen, nichts zu finden auf dieser.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Feste Positionierung ist gebrochen auf iOS5/iOS6/iOS7.
Edit 3: Siehe link zu einer funktionierenden fix am Ende dieser Antwort für iOS8.
Position:fixed wird abgebrochen, wenn entweder:
a) die Seite vergrößert ist
oder
b) die Tastatur zeigt auf dem iPad/iPhone (aufgrund einer Eingabe Fokus erhalten).
Sehen Sie die bugs sich in jsbin.com/icibaz/3 durch öffnen den link und Zoomen, oder geben Sie den Eingabe-Fokus. Bearbeiten können Sie die Bearbeiten Sie die html - selbst.
Notizen über bugs (a) und (b):
Einem fixed div mit
top: 0px; left: 0px;
zeigen in die falsche position (über oder unter dem oberen Rand des Bildschirms), wenn eine Eingabe erhält den Fokus, und die Tastatur zeigt.Scheint das problem zu haben etwas zu tun mit der auto-Zentrierung der Eingabe auf dem Bildschirm (ändern Fenster.pageYOffset).
Scheint es zu sein, eine Berechnung zu Verschulden, und nicht ein redraw-Fehler: wenn Sie erzwingen, dass die
top:
zu ändern (z.B. Wechsel zwischen 0px und 1px) auf dem onScroll-event, sehen Sie die festen div-Bewegung durch ein pixel, aber es bleibt immer an der falschen Stelle.Einer Lösung, die ich früher verwendete, um ausblenden der festen div-Element, wenn eine Eingabe erhält den Fokus - siehe die andere Antwort, die ich schrieb.
Den festen div-scheint wird hängen an der gleichen absoluten position auf der Seite, es war an der Zeit, wenn die Tastatur geöffnet.
So, vielleicht ändern Sie das div mit absoluter Positionierung, wenn ein Eingabe-Fokus hat? Edit 3: siehe Kommentar unten mit dieser Lösung. Oder vielleicht speichern Sie die pageXOffset/pageYOffset Werte, bevor Sie die Tastatur geöffnet ist, und in ein onScroll event berechnen der Differenz zwischen diesen Werten und den aktuellen pageXOffset/pageYOffset Werte (Strom, sobald die Tastatur geöffnet wird), auszugleichen und die fixed-div von diesem Unterschied.
Scheint es ein anderes problem mit fixed-Positionierung, wenn die Seite gezoomt wird - probieren Sie es hier (Auch gute Informationen hier über die Android-Unterstützung für die Feste in den Kommentaren).
Edit 1: Zu reproduzieren, verwenden Sie jsbin (nicht jsfiddle) und verwenden Sie die Vollbild-Ansicht von jsbin (nicht der edit-Seite). Vermeiden jsfiddle (und der Bearbeiten-Ansicht von jsbin), da Sie den code in ein iframe, das verursacht Störungen mit fester Positionierung und pageYOffset.
Edit 2: iOS 6 und iOS 7 Mobile Safari
position:fixed;
hat immer noch die gleichen Probleme - vermutlich sind Sie durch design!.Edit 3: Eine funktionierende Lösung für (b) ist, wenn der Eingabe-Fokus erhalten, ändern Sie die Kopfzeile, um die absolute Positionierung und legen Sie dann die Kopfzeile oben auf der Seite ein scroll-Ereignis zum Beispiel. Diese Lösung:
Dokument.Körper.onfocus).
Für meine Bedürfnisse, ich fand es einfacher zu verwenden ist eine absolute positioniert header ausblenden, bevor Sie scrollen, und zeigen Sie es wenn Ende scrollen (ich muss den gleichen code zur Unterstützung von iOS4 und Android).
Für meine Zwecke, Verstecke ich den header auf eine
touchstart
Ereignis, und zeigen Sie es wieder auftouchend
oderscroll
event (plus einige Zähler, um die Reaktionsfähigkeit zu erhöhen/verringern Sie flimmern). Es blinkt, aber ist der beste Kompromiss, den ich finden konnte. Man kann erkennen, das starten von Blättern mit dertouchmove
Ereignis (jQuery tut dies), aber ich fandtouchmove
nicht so gut für mich, weil:regelmäßig das iPad nicht ein repaint, bevor Sie weiter scrollen (D. H. der absolute Kopf hängen bleibt - auch wenn die
top
geändert wurde, bevor das scrollen beginnt).wenn ein input-element den Fokus erhält, wird das iPad automatisch zentriert das element, aber die scrollstart event nicht gefeuert (weil keine touchmove wenn nur
click
ing Eingangs).Umsetzung einer festen header auf iOS5 verbessert werden könnte, indem mit einem hybrid-Ansatz, Feste und absolute Positionierung:
verwendet, Feste Positionierung für iOS5, bis eine Eingabe erhält den Fokus.
wenn eine Eingabe erhält den Fokus (Tastatur zeigen), wechseln Sie in das iOS4 absolute Positionierung-code.
wenn die Tastatur geschlossen ist, wechseln Sie wieder zur festen Positionierung.
Code zu erkennen, wenn die Tastatur geschlossen ist (z.B. mittels Tastatur ausblenden-Taste) ist die Registrierung der
DOMFocusOut
Veranstaltung auf derdocument
element und etwas tun, wie der folgende code. Der timeout ist notwendig, weil dieDOMFocusOut
- Ereignis ausgelöst werden kann zwischen, wenn ein element den Fokus erhält und der andere verliert es.Meiner festen header-code ist so etwas wie:
jQuery mobile unterstützt scrollstart und scrollstop Veranstaltungen: