web-dev-qa-db-fra.com

iOS 9 `-webkit-overflow-scrolling: touch` et` overflow: scroll` annule les capacités de défilement

Je développe une application Web et j'ai une div à l'intérieur d'une iFrame qui contient un contenu masqué et débordé que je souhaite faire défiler.

Sur Safar sous iOS 9, lorsque j'ajoute -webkit-overflow-scrolling:touch; au div (qui a déjà overflow-y: scroll; pour donner au défilement une sensation fluide, il se casse et ne défile pas du tout.

Je sais qu'il s'agit d'un problème connu mais je n'ai pas trouvé de solutions pertinentes pour mon scénario: j'ai des iFrames qui font plus que transmettre des données, elles contiennent en réalité un contenu pour l'utilisateur. L'orientation n'a pas d'importance, le contenu devra toujours être déroulant.

ioscsssafariwebkittouch
10
Zach

Je viens de rencontrer ce problème avec le contenu dynamique dans une div qui avait overflow: auto et -webkit-overflow-scrolling: touch.

Solution de contournement sale et moche: forcez le contenu à l'intérieur d'être plus volumineux que le div à défilement lorsqu'il est ajouté à dom. Quelque chose comme ça:

<div style="overflow: auto; -webkit-overflow-scrolling: touch;">
    <div style="min-height: 101%">
        dynamic content
    </div>
</div>

Ma théorie est que Safari essaie (a besoin) de faire des optimisations lourdes quand -webkit-overflow-scrolling: touch est ajouté, et que celles-ci ne jouent pas bien avec certains types de contenu dynamique.

14
Christopher Camps

J'ai aussi rencontré ce problème avec webkit-overflow-scrolling: touch sur iOS9. Il peut être reproduit sur un appareil ou sur le simulateur iOS. Comme Christopher Camps le mentionne, cela ne se produit qu'avec du contenu dynamique, c’est-à-dire que le contenu devient plus petit que le conteneur défilable et plus grand que le conteneur.

Voici un CodePen démontrant ce problème , y compris la solution de Christopher Camps.

1
Thomas Kelly

Il semble qu’un autre piratage de ce bogue Safari consiste à utiliser javascript pour définir un style="overflow: none" et le rétablir à sa valeur précédente immédiatement après.

0
stracktracer