Webkit overflow scrolling touch entre en conflit avec webkit transform

Question

Il semble que l'application d'une propriété webkit-transform sur un élément ou son parent qui a webkit-overflow-scrolling: touch casse complètement le défilement, dans le sens où le défilement ne fonctionne pas du tout.

Est-ce que quelqu'un a déjà rencontré ce bug et sait comment le résoudre?

Answer 1

Ma solution actuelle (bidouille) ressemble à ceci:

$container.one 'webkitAnimationEnd', ->
  $container.find('.contents').remove()
  $container.append('.contents')

Essentiellement, je supprime puis réajoute le contenu de la division défilable après la fin de l'animation. J'espère que quelqu'un a une meilleure solution pour cela.

Answer 2

Je rencontre exactement le même problème, et il disparaît uniquement si j'abandonne -webkit-transform au profit du positionnement absolu.

Cela serait acceptable, sauf que le positionnement absolu entraîne de mauvaises performances et une animation saccadée sur iOS, ce qui, sur iOS 6+, ne peut pas être corrigé avec les astuces d'accélération matérielle forcée translateZ et translate3D précédemment populaires.

J'ai trouvé une astuce, mais elle est tellement hideuse et vraiment laide que vous ne voudrez peut-être pas lire la suite :

Prenez l'élément sur lequel nous voulons appliquer -webkit-overflow-scrolling: touch et séparez-le complètement de l'élément sur lequel nous appliquons -webkit-transform. Utilisez la manipulation z-index pour que l'élément défilant apparaisse au même endroit qu'il aurait dû l'être initialement, tout en conservant -webkit-transform pour que le conteneur d'origine (maintenant un conteneur vide) s'anime naturellement. Dans mon cas, cette astuce est insuffisante, car le contenu défilable apparaîtra soudainement au-dessus du conteneur animé, au lieu de glisser en même temps que lui.