Relatywnie pozycjonowane elementy w przewijaniu absolutnie pozycjonowane div "tyle w tyle" na przewijaniu
Mam aplikację PhoneGap, która wyświetla dość długi tekst z nagłówkami, tabelami i obrazami, które testuję na Androidzie.
Wszystko działa dobrze z wyjątkiem elementów ze stylem position:relative
Elementy te" pozostają " w tyle podczas przewijania, co oznacza, że jeśli przewijam stronę, to te elementy zaczynają się i kończą przewijanie około ćwierć sekundy później.
Błąd występuje, gdy łączymy absolutny div z względnymi dziećmi i dziecko z overflow:auto. Usunięcie tych rzeczy naprawia bug, ale wolałbym to zostawić. Chociaż byłbym skłonny usunąć tabelę i pokazać ją osobno (jak w oknie dialogowym), jeśli muszę.
Błąd występuje tylko w standardowej przeglądarce Android(i oczywiście w mojej aplikacji PhoneGap). Do tej pory Przetestowałem go z następującymi urządzeniami:
- Samsung Galaxy Nexus (4.1.1)
- Samsung Galaxy S III (4.1.2)
Każda pomoc jest mile widziana, ale wolałbym rozwiązanie, w którym HTML i funkcjonalność są nie zmienił się (lub nie za bardzo).
Stworzyłem minimalny przykład pokazujący błąd. Po prostu otwórz go na Androidzie i zacznij przewijać, a powinieneś natychmiast zobaczyć problem:
<!doctype html>
<html>
<head><meta name="viewport" content="initial-scale=1.0"></head>
<body style="margin:0">
<div style="position:absolute;overflow:auto;top:100px;bottom:100px;width:100%">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a quam arcu. Duis ultrices mollis nibh ut hendrerit. Etiam a interdum metus. Integer volutpat, nibh laoreet euismod suscipit, libero sem iaculis lorem, ut hendrerit magna orci eu elit. Nulla eu ultricies libero. Nulla facilisi. Maecenas nec turpis vitae magna lobortis ornare sit amet ut lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vestibulum lobortis orci, sit amet ornare dui congue nec. Morbi id magna at turpis auctor ultricies. Ut rhoncus quam augue, ut consectetur risus.</p>
<div style="position:relative;background:red;">relative box<br>moves slower than the other text</div>
<p>Fusce congue orci a nunc gravida sed pretium lorem convallis. Etiam hendrerit, ligula eget lobortis vestibulum, arcu sapien pharetra magna, auctor suscipit nisl tellus quis lacus. Cras id elit at ante mollis venenatis. Donec eu sollicitudin odio. Aliquam erat volutpat. Cras et tortor sed mi faucibus sagittis non quis metus. Morbi mauris ante, posuere vel rutrum id, mattis id enim. Morbi purus quam, euismod facilisis blandit quis, commodo at justo. Aliquam in fermentum nibh. Curabitur pharetra blandit risus sit amet tristique. Suspendisse potenti. Curabitur interdum eleifend justo, et dapibus justo volutpat sed.</p>
<div style="overflow:auto">
<table>
<tr><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th></tr>
<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
</table>
</div>
</div>
</body>
</html>
4 answers
Krótko mówiąc, choroby, które cierpisz, są powszechne i udokumentowane. Elementy z overflow:auto lub overflow:scroll cierpią z powodu problemów z malowaniem/reflow / renderowaniem zarówno w przeglądarkach stacjonarnych, jak i mobilnych. W związku z tym istnieją problemy w przeglądarkach mobilnych (webkit zarówno na iOS, jak i Android) w odniesieniu do nie renderowania elementów względnych i bezwzględnych, jeśli są one "poza ekranem". Może to prowadzić do opóźnienia, gdy są przewijane na ekranie.
Istnieje kilka" hack " shims, które można zastosować:
element {
-webkit-overflow-scrolling: touch;
}
element > * {
-webkit-transform: translateZ(0px);
}
element > * {
-webkit-transform: translate3d(0,0,0);
}
Niektóre czytanie dla Ciebie:
- http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas / http://developersday.wordpress.com/2012/08/07/scrollable-divs-rendering-issues-with-css-overflow-auto-or-scroll-iosandroid/
I fragment, który skopiowałem skądś do notatek i teraz nie mogę znaleźć Źródła:
Szczególnie na stronach, które w dużym stopniu polegają na scrollu, możesz odkryć że Twoja główna treść opiera się na przepełnienie: przewijanie. To jest prawdziwe wyzwanie, ponieważ to przewijanie nie jest w żaden sposób przyspieszane przez GPU, więc zawartość jest malowana za każdym razem, gdy użytkownik przewija. Możesz obejść takie problemy przy normalnym przewijaniu strony (overflow:visible) i pozycja: stała.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-06 17:28:52
Myślę, że masz dwa problemy, które próbujesz naprawić. Tekst, który ześlizguje się poniżej i opóźniona prędkość przewijania?
Nie jestem pewien, co próbujesz zrobić z symbolem praw autorskich, ale nie miałbym line-height mniej niż 1 lub 1em. Spróbuj użyć elementu nadrzędnego i wystylizuj jego rozpiętość. Prawdopodobnie możesz użyć display:inline-block; vertical-align: middle; na rozpiętości, aby uzyskać pożądany efekt.
<p><span>©</span>Some text</p>
Przewijanie zależy od tego, co robisz. Przeglądarki mobilne czekają 300ms na Tagi <a>, aby sprawdzić, czy przewijanie lub kliknięcie linku. To może być z tym związane. Jeśli tak, to checkout Google FastClick.
Przeglądarki mobilne przyspieszają przewijanie strony na ciele. Więc używanie zagnieżdżonych div lub position:absolute może powstrzymać cię od uzyskania szybszej prędkości przewijania. W nowszych wersjach Android i iOS możesz użyć-webkit-overflow-scrolling: touch, aby pomóc, ale to nic nie da dla starszych telefonów. Starałbym się nie używać position absolute bo na twoim przykładzie nie wygląda to na jego wymagane, również używając zagnieżdżone div, które przewijają, wymagają od niektórych użytkowników użycia dwóch palców wewnątrz div do przewijania zawartości. Chciałbym również tego uniknąć i zastąpić projekt bardziej przyjaznymi dla urządzeń mobilnych wzorcami projektowymi, takimi jak link, który rozszerza zawartość.
Wiele problemów z przewijaniem wyszło na jaw podczas próby obsługi position:fixed na telefonie komórkowym, jeśli myślisz, że to może być przyczyną i chciałbyś o tym przeczytać: http://bradfrostweb.com/blog/mobile/fixed-position/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-05 10:35:18
Usuń position:absolute i position:relative, absolutnie nie są potrzebne do tego układu i powodują wszystkie Twoje problemy.
margin-top do swojego ciała, jeśli chcesz.
PhoneGap produkuje jakieś śmieci html jak to, mam nadzieję, że masz dobrą kontrolę nad CSS.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-05 10:33:15
W rzeczywistości jest dla niego prosta poprawka CSS, dodanie position:relative do akapitów rozwiązuje problem.
Spróbuj tego:
<!doctype html>
<html>
<head><meta name="viewport" content="initial-scale=1.0">
<style>
p{ position:relative;}
</style>
</head>
<body style="margin:0">
<div style="position:absolute;overflow:auto;top:100px;bottom:100px;width:100%">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a quam arcu. Duis ultrices mollis nibh ut hendrerit. Etiam a interdum metus. Integer volutpat, nibh laoreet euismod suscipit, libero sem iaculis lorem, ut hendrerit magna orci eu elit. Nulla eu ultricies libero. Nulla facilisi. Maecenas nec turpis vitae magna lobortis ornare sit amet ut lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vestibulum lobortis orci, sit amet ornare dui congue nec. Morbi id magna at turpis auctor ultricies. Ut rhoncus quam augue, ut consectetur risus.</p>
<div style="position:relative;background:red;">relative box<br>moves slower than the other text</div>
<p>Fusce congue orci a nunc gravida sed pretium lorem convallis. Etiam hendrerit, ligula eget lobortis vestibulum, arcu sapien pharetra magna, auctor suscipit nisl tellus quis lacus. Cras id elit at ante mollis venenatis. Donec eu sollicitudin odio. Aliquam erat volutpat. Cras et tortor sed mi faucibus sagittis non quis metus. Morbi mauris ante, posuere vel rutrum id, mattis id enim. Morbi purus quam, euismod facilisis blandit quis, commodo at justo. Aliquam in fermentum nibh. Curabitur pharetra blandit risus sit amet tristique. Suspendisse potenti. Curabitur interdum eleifend justo, et dapibus justo volutpat sed.</p>
<div style="overflow:auto">
<table>
<tr><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th> <th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th> <th>test</th><th>test</th><th>test</th><th>test</th><th>test</th></tr>
<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td> <td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td> <td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
</table>
</div>
</div>
</body>
</html>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-07 08:08:42