Scroll d’une iframe sous iOS (iPad, iPhone, iPod)


Un problème étrange qui touche les iframe sous iOS (notament iOS 6 et 7) : le scroll ne marche pas.

J’ai eu le cas d’une div contenant une iframe.
Sous IE 9, Firefox, Chrome, Firefox Android, Chrome Android, le scroll marchait normalement. Mais sous iOS ni Chrome, ni Safari ne faisait fonctionner le scroll. Pire le contenu de la div déborde de la div au dessus de l’iframe.

Pour remédier à cela, et non sans mal, voici ma solution.

appliquer ce style sur la div (en fixant la hauteur exemple ici 600px)

overflow-x: hidden !important; overflow-y: scroll !important; -webkit-overflow-scrolling:touch !important; height:600px;

appliquer ce style sur l’iframe (en fixant la hauteur exemple ici 800px)

width: 100%; overflow: hidden; height:800px;

et voilà !

2 réflexions sur « Scroll d’une iframe sous iOS (iPad, iPhone, iPod) »

  1. Bonjour,

    Je voulais vous signaler un problème de mon côté avec les iframes sur IOS.
    Sur mon site responsive, j’ai intégré un page WordPress dans une iframe : http://www.bulledevert.fr/blog.html

    Sur desktop, le site et la frame sont responsives : le thème change en fonction de la largeur du browser.
    Sur Safari IOS, la frame n’est pas responsive : le thème reste celui par défaut, c’est à dire WP15 desktop…

    Avez vous rencontré ce problème et si oui comment le corriger ?

    Réponse

Laisser un commentaire