Czy istnieje znane obejście problemu renderowania stałych elementów w niewłaściwym miejscu, gdy na ekranie znajduje się wirtualna klawiatura iOS?

Mam aplikację, która wykorzystuje WKWebView dla większości treści. Na kilku ekranach mamy przyciski w elemencie div, które wykorzystują position: fixed;, dzięki czemu są zawsze w tym samym miejscu, w którym przewija się długi formularz. Kiedy pojawia się wirtualna klawiatura, dodaję do treści dokumentu klasę, której można użyć do dostosowania innych rzeczy, na przykład poprawiając właściwość bottom elementu div zawierającego te przyciski, tak aby przesuwały się one nad klawiaturą.

Jak na razie wszystko w porządku, zawsze je widać. Problem pojawia się, gdy formularz jest następnie przewijany, przyciski wyraźnie przesuwają się w górę wraz z resztą strony (co nie powinno), ale przeglądarka faktycznie zachowuje się tak, jakby nadal znajdowały się tam, gdzie powinny. Zrzut ekranu pokazuje, gdzie według przeglądarki znajdują się przyciski, a jeśli dotkniesz tych obszarów, przyciski zostaną aktywowane.

tutaj wprowadź opis obrazu

Z przyjemnością uznam to za błąd w WebKit, a konkretnie w WKWebView, ale czy istnieje znane obejście tego problemu, aby renderowały się we właściwym miejscu? Czytałem, że dodanie tłumaczenia w celu uruchomienia renderowania sprzętowego mogłoby pomóc, ale wydaje się, że tutaj nie spełniło swojego zadania. Czytałem również, że zmiana pozycji na absolute może rozwiązać ten problem, ale w moim przypadku skutkuje to po prostu renderowaniem ich gdzieś poza ekranem.


person Matt Lacey    schedule 20.06.2018    source źródło
comment
Zastanawiałem się, czy można wyłączyć przewijanie w WebView, gdy dostępna jest klawiatura. Przepraszam, jeśli brzmię głupio, jeśli potrzebujesz webView do przewijania, gdy użytkownik pisze!   -  person Karthick Ramesh    schedule 02.07.2018
comment
Tak, jest mnóstwo pól formularzy. Myślę, że po prostu ukryję przyciski, gdy klawiatura będzie widoczna, ponieważ powierzchnia ekranu i tak jest dość ograniczona.   -  person Matt Lacey    schedule 02.07.2018
comment
użyj position: absolute - spraw, aby działało, ponieważ jest to jedyny ustalony sposób przewijania   -  person Pierre    schedule 03.07.2018


Odpowiedzi (1)


Możesz dodać stałą pozycję do opakowania przycisku

.btn-bar-fixed {
   position: fixed;
    bottom: 0px;
    right: 0px; 
}
person Heena Vora    schedule 03.07.2018
comment
Przepraszamy, nie widać tego na zrzucie ekranu, ale mniej więcej tak zdefiniowano btn-bar-fixed. Wszystko jest w porządku, dopóki nie pojawi się klawiatura. - person Matt Lacey; 04.07.2018