wejście iOS koncentruje się wewnątrz nieruchomej pozycji dominującej zatrzymuje aktualizację stałych elementów

Question

poniższych sytuacji na Mobile Safari iOS 6.1.2

Kroki prowadzące do odtworzenia

Tworzenie elementu position: fixed z <input type="text"> elementu wewnątrz niego .

Rzeczywisty wynik

1. wejściowe - nie koncentruje

   Stanowisko stałych elementów jest poprawna, gdy wejście nie jest skoncentrowany.

   

2. wejściowe - koncentruje

   Gdy wejście jest skupiony, przeglądarka przechodzi w specjalny tryb, w którym nie aktualizuje położenie stałych elementów dłużej (dowolny stałe umieszczony elementem , nie tylko rodzica danych wejściowych) i przenosi cały ekran w dół, aby element rodzica wejściowego znajdował się na środku ekranu.

   Zobacz demo na żywo: http://jsbin.com/oqamad/1/

   

Oczekiwany wynik

Stanowisko stałych elementów jest zawsze przestrzegane.

Poprawka lub obejście problemu?

Pomocne byłyby wszelkie wskazówki, jak wymusić na przeglądarce Safari prawidłowe wyświetlanie stałych elementów.

Wolałbym obejście problemu, które nie wymaga użycia position: absolute i ustawienie obsługi zdarzeń onscroll.

Answer 1

Pozycja: Naprawiono wiele dobrze znanych błędów, możesz je sprawdzić tutaj: Remysharp article. Prawdopodobnie wciąż możesz naprawić niektóre z nich używając odpowiedzi z tego pytania: CSS “position: fixed;” into iPad/iPhone?

Powodzenia!

Answer 2

Tak, jest to problem dotyczący iOS-a Safari od wersji 5. Jeśli używasz Chrome na iOS, zauważysz, że będzie działać poprawnie. Bodge, którego używam, aby to naprawić, to stworzenie i dodanie elementu stylu do ciała, a następnie usunięcie go, a następnie skupienie się na elemencie.

Nie pytaj mnie, dlaczego to działa, po prostu zbyt wiele godzin prób i błędów!

Zauważyłam również, że po raz pierwszy w tym jest stałe nie trzeba wykonywać sztuczki stylu dla kolejnych stałych elementów pozycjonowanych

Answer 3

Jest to dobrze znany bug na Safari, zarówno na iPad i iPhone.

Sposób obejścia polega na zmianie pozycji na bezwzględny dla wszystkich elementów ustawionych ze stałą pozycją.

W przypadku korzystania modernizr można kierować również na urządzeniach mobilnych w ten sposób:

---

kod jQuery

---

$(document).ready(function() { 

    if (Modernizr.touch) { 

     $(document) 

     .on('focus', 'input', function(e) { 
      $('body').addClass('fixfixed'); 
     }) 

     .on('blur', 'input', function(e) { 
      $('body').removeClass('fixfixed'); 
     }); 

     } 

}); 

---

CSS

---

Jeśli chcę kierować tylko nagłówek i stopkę na przykład, że są ustawione w stałym położeniu, gdy klasa „fixfixed” zostaje dodany do ciała mogę zmienić pozycję absolutną do wszystkich elementów o stałej pozycji .

.fixfixed header, .fixfixed footer { 
    position: absolute; 
}