Ho un'app PhoneGap che visualizza un testo piuttosto lungo con intestazioni, tabelle e immagini che sto testando su Android.Elementi posizionati in modo discreto posizionabili posizionati div "lag behind" su scroll
Tutto funziona bene, tranne per gli elementi con stile position:relative Questi elementi "lag" dietro durante lo scorrimento, il che significa se ho scorrere la pagina, quindi quegli elementi di inizio e fine scorrimento circa un quarto di secondo più tardi.
L'errore si verifica quando si combina un div assoluto con figli relativi e un bambino con overflow:auto. Rimozione di una di queste cose risolve il bug, ma preferirei lasciarlo. Anche se sarei disposto a rimuovere la tabella e mostrarla separatamente (come in una finestra di dialogo), se necessario.
Il bug si presenta solo sul browser Android standard (e ovviamente sulla mia app PhoneGap). Finora ho provato con i seguenti dispositivi:
- Samsung Galaxy Nexus (4.1.1)
- Samsung Galaxy S III (4.1.2)
Qualsiasi l'aiuto è apprezzato ma preferirei una soluzione in cui l'HTML e la funzionalità non sono cambiati (o non troppo).
ho creato un minimal example che mostra il bug. È sufficiente aprire sul vostro Android e iniziare lo scorrimento e si dovrebbe vedere immediatamente il problema:
<!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>
potreste fornire un jsfiddle o un tinkerbin o liveweave –
Ho aggiornato il post con un link. Questi servizi purtroppo non ti permettono di aggiungere meta header. – Thomas
grazie, risposta aggiunta. –