Ein bug bei iOS5 (Safari), ein "position:fixed" div, und von den hohen Formen

Alle,

Ich arbeite an einer web-Anwendung, die beinhaltet eine sehr "hohe" form. (Durch groß, es bedeutet, dass es mehrere hundert Prozent höher als ein typischer Bildschirm).

Design fordert eine "Fußzeile" verankert, um den unteren Rand des Bildschirms IMMER sichtbar, unabhängig von der position des Nutzers in der form.

In anderen Worten, sollte die Fußzeile sichtbar sein, unabhängig davon, ob der Benutzer in der Nähe des oberen, mittleren oder unteren Rand der form, und die form sollte scrollen "unter" ihm.

Umzusetzen, habe ich den footer wie ein div mit position:fixed, und bottom:0.

Diese funktioniert perfekt auf allen Browsern die ich getestet habe, einschließlich Safari auf iOS5.

Außer es gibt EINE bug...

Wenn der Benutzer in der Nähe des oberen Rand des Formulars und setzt den Fokus auf eines der Textfelder - wie erwartet, iOS zeigt die Tastatur.

Jedes mal, wenn der Benutzer die Klicks Nächsten - Taste, iOS - "tabs") Sie zum nächsten Feld.

Als Sie schreitet nach unten die form durch wiederholtes klicken Nächsten, iOS automatisch "blättert" die form, so dass Ihre position auf dem Formular bleibt im Blick.

Jedoch iOS nicht aktualisieren, scheint die position des position:fixed footer-div - falsch blättert zusammen mit dem rest der form.

Wenn schließt der Benutzer die Tastatur, die div wird restauriert, um es den "richtigen" Platz, so dass dies nicht zu einem nicht behebbaren Fehler. Aber die Tatsache, dass der footer verschoben ist überhaupt ein krasses problem.

Ist das ein Fehler oder Manko bei iOS ist die Implementierung der position:fixed? Oder ist es etwas, was ich falsch mache?

Vielen Dank im Voraus!

[UPDATE]

Remy Sharp (treffend benannte) gerade geschrieben hat eine sehr gute und ausführliche Nachricht über eine Vielzahl von bugs und Probleme mit position:fixed auf iOS/Safari: http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/. Es ist ein must-read, wenn Sie denken über die Verwendung von position:fixed auf einer Website soll für iOS-Nutzer...

InformationsquelleAutor mattstuehler | 2012-05-23
  1. 2

    Ich weiß, dass position:fixed war ursprünglich nicht unterstützt in früheren Versionen von iOS, ich weiß iOS5 unterstützt es, aber ich hatte Problem mit ihm in der Vergangenheit. Wenn Ihre Fußzeile ist eine Art von Steuerelement-Leiste dann würde ich vorschlagen, mit einem CSS sticky footer dann alle Seiten/Inhalte geladen werden konnte in eine div über diese.

    InformationsquelleAutor dciso
  2. 2

    Benutzt du jQuery? Wenn dem so ist, vermute ich so etwas wie diese Arbeit funktioniert:

    $(":input").focus( function() {
  $(window).scrollTop( $(window).scrollTop() + 1 );
});

    Durch scrollen der Seite von 1px nach dem fokussieren ein neues Formular-element, es sollte zurücksetzen der festen element unten-Attribut.

    InformationsquelleAutor Rob Lowe
  3. 1

    Hier ist das Update, ohne die Fußzeile springen um auf Sie.

    1. zuerst wickeln Sie die Kopf-und Körper - /Abschnitt in einem div. Machen das div Scrollbar ist.
    2. als Sie position absolute die Fußzeile und die position relativ alles andere.
    3. add festen Höhen.

    Sehe es hier, http://yinnetteolivo.com/footerbottom.html

    Ihre willkommen 🙂

    • Yinnette, Das ist eine gute Lösung. Das problem mit ihm, obwohl (wenn ich nicht falsch verstehen), ist, dass es erfordert mich zu haben eine Feste Höhe für den Körper. Ist dies nicht möglich, auf ein nicht-iOS-Gerät, wo das Fenster kann in der Größe verändert werden. (Auch Gerüchte, dass die iPhones 5 haben einen unterschiedlichen Bildschirm-Höhe ist als frühere Modelle, was auch bedeutet, ich sollte nicht davon ausgehen, eine Feste Höhe für den body-Abschnitt.) Ich weiß, ich kann JavaScript verwenden Sie zum anpassen der Körpergröße Stil auf einem Fenster-resize-Ereignis, aber das wird ziemlich kitschige...
    InformationsquelleAutor Yinnette
  4. 0

    Keiner der anderen Antworten, die ich gefunden habe für diesen bug haben für mich gearbeitet. Ich war in der Lage, es zu beheben einfach durch scrollen der Seite zurück 34px, die Menge mobile safari scrollt es nach unten. mit jquery:

    $('.search-form').on('focusin', function(){
    $(window).scrollTop($(window).scrollTop() + 34);
});

    Diese offensichtlich wirksam in allen Browsern, aber es verhindert, dass Sie brechen in iOS.

    InformationsquelleAutor NealJMD
Schreibe einen Kommentar