iOS5 -webkit-overflow-scrolling provoque des événements tactiles arrêtant le travail
lors de l'utilisation de [-webkit-débordement-défilement: appuyez;], la zone de défilement ne fonctionne pas bien,
mais il provoque des événements tactiles de l'arrêt de travail, hors de la zone de défilement.
Est-ce que quelqu'un a eu le même problème? Qui peut me donner quelques officiels des liens sur cette nouvelle fonctionnalité de défilement?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ios5 scroll</title>
<style type="text/css">
header {
background: red;
width: 300px;
height:44px;
}
.scroll {
width: 300px;
height:300px;
background: yellow;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<div id="container">
<header>
<button onclick="alert('header');">won't work?</button>
</header>
<div class="scroll">
<button onclick="alert('scroll');">It works</button>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
</div>
</div>
</body>
</html>
2011-12-27: j'ai résolu ce problème mais je n'ai toujours pas étonnant que la vraie raison.
Dans mon cas, j'ai plusieurs articles dans une page web, chaque section dispose d'une zone de défilement et un en-tête, chaque fois qu'une section est montré et utiliser css3 animation combinée avec de transformation pour passer les sections. lors de l'ajout des [-webkit-débordement-le défilement] dans la zone de défilement de toutes les sections, les événements tactiles arrêter de travailler de façon aléatoire, alors j'ai juste ajouter [-webkit-débordement-le défilement] dans la section qui est montré à l'heure actuelle et l'enlever lorsque la section est caché. Cela fonctionne bien, mais je ne sais toujours pas ce qui cause ce problème.
source d'informationauteur user994778
Vous devez vous connecter pour publier un commentaire.
J'ai le même problème, et je peux aussi reproduire à chaque fois. J'ai une page qui redimensionne les éléments à l'écran lorsque l'orientation de l'iPad changements. À tout moment, si l'élément n'a plus besoin de faire défiler, il va cesser de le faire par la suite, même si l'élément est redimensionné retour à l'endroit où il doit faire défiler (par exemple, repassez en mode paysage pour moi). Donc c'est vraiment un bug, mais j'ai une solution:
Lors d'un redimensionnement de l'élément, je suis la réinitialisation de la
-webkit-overflow-scrolling
àauto
puis en fixant de nouveau àtouch
. Cependant, vous devez introduire un délai entre les deux (50ms fonctionne très bien, ne pas essayer un peu plus bas). Donc je l'ai ajouté un attribut de "défilement" pour les éléments, et utilisé le code ci-dessous (à l'aide de jQuery):Espérons que cette aide!
Ceci est causé par la présence d'une
<iframe>
sur la page. De nombreux scripts de créer<iframes>
pour faire leur travail social, y compris le suivi des boutons (Facebook, Twitter, G+), suivi google analytics (Google, etc.), et les bibliothèques comme PhoneGap.Il n'a pas d'importance comment les
<iframe>
est affiché.display: none; visibility: hidden; width: 0; height: 0
ne pas le fixer. Si un<iframe>
est sur la page, il va se produire, parfois de façon intermittente et parfois toujours.La seule solution que j'ai trouvé à ce jour (qui est en train de ne pas être très efficace dans la production de l'app) est de supprimer toutes les
<iframes>
sur la page, créer uniquement en cas de besoin (par exemple, quand j'ai besoin d'appeler une API PhoneGap), et puis de les supprimer lorsque vous avez terminé.Je confirme, j'ai vu le même problème sur une application web en utilisant largement les événements tactiles et liste des parchemins.
Avant iOS5 j'ai été en utilisant iScroll, et tout fonctionnait bien;
Avec iOS5, j'ai utilisé -webkit-débordement-défilement:appuyez pour faire défiler les listes d'obtenir plus rapidement des parchemins.
La conséquence en est que j'ai rencontré hasard des événements tactiles pas plus de travail sur les différentes parties de l'application. Les problèmes surviennent généralement après que j'ai défiler une liste. elle affecte de façon aléatoire des éléments en dehors de la volutes de la zone, en général, un pied de page menu.
De rechargement de l'application lorsque en "gelée touch' état n'est pas dégèle : pour le débloquer, il, j'ai dû fermer l'onglet safari, ouvrez-en un nouveau et de le recharger, jusqu'à ce que j'ai de nouveau rencontré le problème tout en utilisant l'application.
Le problème est vu sur iPad2, iPhone 4, iPhone 3GS, le tout sur iOS 5.0
Finalement, j'ai désactivé le débordement de la touche de défilement et revint iScroll, et les choses fonctionnent bien que dans la version iOS4 .
Voici une variation sur quelques unes des réponses y sont déjà inscrits.
Mon problème était que la réorientation causé le défilement d'arrêter de travailler complètement quand
-webkit-overflow-scrolling: touch
a été appliquée à un élément.Exemple: l'orientation Paysage est plus court et a besoin d'une barre de défilement. Le Portrait est assez grand qu'aucune barre de défilement est nécessaire. Réorienter au paysage; barre de défilement est présent mais non fonctionnelle.
écouter l'événement orientationchange
faire quelque chose qui déclenche un changement de présentation sur le défilement de l'élément
s'assurer que le changement est suffisamment important pour que le moteur de rendu n'est pas de l'optimiser à l'écart. Par exemple, se cacher, puis immédiatement montrant ne semble pas faire quoi que ce soit. Tout ce qui utilise
setTimeout()
semble fonctionner (c'est peut-être différent du contexte d'exécution, je ne sais pas).En fondu œuvres, ou en cachant et montrant avec un court délai de travaux (si elle clignote). @Sari de solution pour changer les propriétés de défilement fonctionne et ne cause pas visible redessiner.
Remarque que je n'ai pas testé ce correctif au-delà de mon iPad 3 autres que pour s'assurer qu'il ne cause pas des erreurs de script dans Chrome ou IE 7/8/9.
-webkit-débordement-le défilement + Animations CSS3 + Phonegap appels d'API = touche cesse de répondre.
Mon phonegap application fonctionnera bien jusqu'à ce que je fais un appel à une API Phonegap, à quel point le touch va cesser de répondre principalement sur le premier élément qui a un événement attaché à elle dans la vue actuelle. Une vue pour mon application est body > div.actuel avec le reste de la divs afficher aucun.
Je peux reproduire ça à chaque fois.
C'est clairement un bug dans iOS5.
Dans ce cas est de toute utilisation...Intégrant PhoneGap j'ai été en utilisant Zepto pour ajouter ajax chargé, du contenu défilant dans les dom. J'étais alors l'application d'une transition css. Il n'y avait pas les iFrames sur la page.
Je vivais la même question, comme indiqué ici, où le défilement voudrais juste arrêter de travailler. Quand j'ai copié le code généré dans un fichier séparé et j'ai essayé que sur le simulateur iOS - tout a fonctionné comme prévu.
J'ai finalement réussi à le faire fonctionner par l'interrogation de la hauteur du conteneur parent - juste avant la transition css. En ajoutant
var whatever = $('#container').height();
le défilement travaillé.Pour améliorer un peu ThinkingStiff est excelent réponse, vous pouvez éviter les clignotements
- si overflow:hidden est réglé
- si, au lieu de "auto", la valeur vient de supprimer la propriété: