Je suis un peu un problème avec un site réactif pour le moment.
Toutes sauf une des pages ne reçoivent pas l'élan de défilement que vous recevrez normalement d'utiliser Internet sur votre téléphone. Je ne sais pas si cela est limité au safari mobile ou à d'autres navigateurs mobiles, je viens de commencer seulement le travail réactif sur ce site.
Mais quelqu'un sait-il pourquoi certaines pages pourraient ne pas avoir d'élan de défilement? Certaines pages sont assez lourdes avec des images et une petite jQuery, mais je ne pense pas qu'il y ait suffisamment de problèmes de rendu.
Des idées?
Le lien vers le site Dev est: apt.codeplayground.co.uk .
[modifier]
Il semble y avoir un problème avec notre .wrapper div, car cela n'était pas inclus sur la page à propos de la page qui fonctionnait, nous avons maintenant inclus le défilement ne fonctionne pas correctement.
3 Réponses :
J'avais juste le même problème. J'ai trouvé ce lien , qui a résolu le problème.
Ajoutez cette ligne de CSS à l'élément qui défile: -WebKit-overflow-défilement: touche;
Excellent merci! J'avais ce problème avec JQuery Mobile, iOS et Infinite défilement pour lequel vous devez définir une hauteur afin de faire fonctionner correctement .scrolltop ().
Seul le corps obtenant le défilement natif. Tous les éléments qui ont des défilations de débordement sont vraiment lents. Touchez le défilement peut résoudre ce problème, mais il est préférable de laisser le corps faire défiler si vous le pouvez. C'est beaucoup plus rapide et utilise la texture GPU composant beaucoup mieux.
Touchez Scroll avec Créer un instantané de l'élément défilé lorsque vous commencez à défiler. Il ajoute cette image à une texture GPU, puis lorsque vous arrêtez de faire défiler, il détruit la texture GPU. Laisser le défilement du corps utilise mieux votre mémoire de texture et il s'agit généralement de la meilleure solution.
Comme c'est intéressant. Pouvez-vous donner des sources pour ces informations? J'aimerais en savoir plus à ce sujet.
Si vous avez accès à un compte de développeur Apple, ils ont des vidéos avec de nombreux détails sur la façon dont le navigateur fonctionne.
J'ai regardé dans la touche défilante et on dirait que cela a changé depuis iOS4. Faites défiler les éléments sans cesse de l'exécution JavaScript et il ne cache pas une texture GPU. La texture est toujours créée comme des éléments normaux. minus.com/lfzwnkxxbddya minus.com/lbc3h74bovk4ey jsbin.com/aziwowe/9
Parallèique avec ce que @Mark a dit, concernant la propriété CSS, nous devons nous rappeler que cette propriété devait être donnée au parent du contenu défilé.
Signification DOUMUM peut fonctionner sur le conteneur de la nécessité d'être Contenu défilé. Pas sur le contenu directement, sinon il ne peut pas comprendre comment et pour quoi donner l'élan. P>
.element_that_scrolls
{
overflow:auto;
-webkit-overflow-scrolling: touch;
}
//Wrong
<ul class="element_that_scrolls">
...
</ul>
//Correct
<div class="element_that_scrolls">
<ul>
...
</ul>
</div>