Naprawiono/bezwzględne pozycjonowanie zaniedbane w iOS podczas ustawiania ostrości na wejściu

Question

Buduję aplikację z Phonegapem i mam nagłówek, który ustawiłem na górze ekranu.

header { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    height: 30px; 
    background-color: red; 
    z-index: 100; 
} 

Działa tak, jak chcę, z wyjątkiem sytuacji, gdy stukam pole wprowadzania danych, a klawiatura przesuwa się w górę. Następnie pozycjonowanie jest całkowicie odrzucane. Nagłówek jest przesuwany wyżej poza widoczny widok. Powraca na swoje miejsce po ponownym zamknięciu klawiatury.

Czytałem, że niektóre przeglądarki mobilne nie dbają o pozycję ustaloną i absolutną, aby upewnić się, że ewentualnie mały ekran nie zostanie pokryty stałym elementem. Czy to prawda?

Czy istnieje sposób obejścia tego?

Próbowałem ustawić nagłówek absolutny, gdy wejście jest skoncentrowane. Przeczytałem o tym tutaj, http://dansajin.com/2012/12/07/fix-position-fixed/. Jednak dla mnie to nie działa.

Wdzięczny za każdą pomoc. Zdrówko

Answer 1

Implementacja ustalonego pozycjonowania na iOS przez PhoneGap to bałagan, jeśli chodzi o wirtualną klawiaturę. Próbowałem już wielu proponowanych rozwiązań, w tym tego, z którym się łączyłeś, ale żaden z nich nie działał poprawnie. Wyłączenie KeyboardShrinksView może spowodować ukrywanie pola wejściowego pod klawiaturą.

Skończyło się na tym obejściu, które po prostu ukrywa stały nagłówek, gdy klawiatura wsuwa się w widok i pokazuje go ponownie po wysunięciu klawiatury poza widok. Czekam na bardziej kompletną poprawkę, ale to rozwiązanie ma tę zaletę, że jest czyste i niezawodne. Opóźnienie 10 ms na show() wystarcza, aby nagłówek nie migał chwilowo w niewłaściwym miejscu, podczas gdy klawiatura zsuwa się z powrotem. Opóźnienie 20 ms na hide() zapobiega pojawieniu się nagłówka w niewłaściwym miejscu, jeśli użytkownik przejdzie bezpośrednio z jednego pola wprowadzania danych do następnego.

$(document).on('focus','input, textarea, select',function() { 
    setTimeout(function() { 
     $('header').hide(); 
    },20); 
}); 
$(document).on('blur','input, textarea, select',function() { 
    setTimeout(function() { 
     $('header').show(); 
    },10); 
});