Błąd przepełnienia i absolutnego pozycjonowania w przeglądarce Android

Question

Mamy mobilną aplikację internetową zbudowaną przy użyciu JQuery Mobile, PhoneGap i ASP.net MVC. Aplikacja jest przeznaczona do uruchamiania na urządzeniach z systemem iOS i Android, niezależnie od przeglądarek. Przetestowaliśmy aplikację na urządzeniach wymienionych poniżej i wydaje się działać prawidłowo bez żadnych problemów

iOS 5 - iPad, iPhone.

Android 4.1.2 - Google Nexus 7, Samsung Galaxy S3, Samsung Galaxy Note 2, Samsung Galaxy Tab 2.

Android 4.0.3 - Asus Transformer Tab

Ale kiedy testowane na Przeglądarka plików Android z Samsung Galaxy Note 800 z 4.1.2, napotkaliśmy na bardzo dziwny problem. Elementy umieszczone w div (np. Div child) z atrybutem css "przepełnienie: auto" nie reagują na żadne zdarzenia dotykowe, gdy przewijanie jest włączone. Najważniejszą rzeczą, na którą należy zwrócić uwagę, jest to, że Element nadrzędny zawierający ten element div jest ustawiony w pozycji ": abolute". Po pewnym czasie badań przez Internet stwierdziliśmy, że połączenie bezwzględnej pozycji i atrybutów przepełnienia może powodować pewne problemy w przeglądarce Androida.

Usunięcie pozycji bezwzględnej nie jest obecnie możliwe, ponieważ powoduje całkowite przeprojektowanie układów i pozostało nam tylko kilka dni na wydanie. Czy ktokolwiek może zaproponować szybkie rozwiązanie tego problemu?

Answer 1

Możesz użyć biblioteki javascript o nazwie "iScroll". Działa z większością urządzeń z Androidem i nie jest trudny do wdrożenia. Po prostu wpisz var scrollDiv = new iScroll('divId'); poniżej elementu div. Tutaj jest strona projektu: http://cubiq.org/iscroll-4

Answer 2

Nie wiem, dlaczego to działało, ale dodawanie -widok-backface-visibility: hidden; do Twojego stylu to naprawi

Answer 3

Problem z overflow: auto jest/był znanym problemem w przeglądarce Androida. Wystąpił problem z tym w 2009 roku (see here). Myślałem, że rozwiązali to w międzyczasie. Jest oznaczony jako przestarzały. Ale ludzie wciąż narzekają, że to nie działa. Jeśli tak jest, podejrzewam, że już tego nie naprawią, ponieważ Chrome stał się teraz standardową przeglądarką systemu Android.

Answer 4

Zamiast tego należy użyć właściwości overflow-x i/lub overflow-y.

EG

overflow-y: scroll; /* allow vertical scrolling */ 
-webkit-overflow-scrolling: touch; /* optional momentum scrolling */ 

Ponadto, ponieważ paski przewijania są ukryte na urządzeniach dotykowych można użyć :scroll zamiast :auto. Będzie wyglądać tak samo, ale może nie podlegać tym samym błędom.

Answer 5

Co powiesz na umieszczenie elementów w absolutnie umiejscowionym pojemniku w nowym dziale i ustawienie go w pozycji względnej?

<div class="absolutelyPositionedParent"> 
    <div class="relativelyPositionedElement"></div> 
</div> 

<style>.relativelyPositionedElement{position:relative;overflow:auto;}</style>