web-dev-qa-db-fra.com

problèmes de défilement iOS dans un site Web intégré avec iframe

J'ai un problème avec les iframes sur iOS (Safari).

Nous utilisons une page Web dans notre page Web via un iframe - cela a l'air génial sur PC et sur Android, mais sur iOS, la vue entière est brisée et je ne parviens plus à faire fonctionner l'iframe déroulant sur iOS.

Nous réglions le problème de défilement iOS en dehors de l'iframe lui-même (dans un div) avec:

   overflow: auto;
   -webkit-overflow-scrolling: touch;
   position: fixed;

Malheureusement, cela ne fonctionne plus, alors nous l'avons retiré . C'est à quoi ressemble l'iframe en ce moment}: 

    <div class="nobottommargin">

            <p><iframe style="height: 500px; width: 100%; border: none; top: 0; left: 0;" src="https://url.com" scrolling="yes" allowfullscreen="yes" width="320" height="240"></iframe></p>
    </div>

Une idée sur la façon de résoudre ce problème ou sur d’autres alternatives qui pourraient être utilisées ici?

Edit: ce que j'ai aussi essayé, sans aucun succès: 

  • touch-action: auto sur la balise iframe
  • scrolling="no" sur la balise iframe
  • pointer-events: none

Edit 2: Le défilement fonctionne maintenant MAIS, tout en faisant défiler l'écran, il coupe mon iframe au milieu. Emission uniquement sur iOS à nouveau (semble bien sur Android et PC).

Voici le code de défilement iOS fonctionnel avec le bogue de rognage iframe que j'ai:

<div class="scroll-container scroll-ios" style="height:500px;width: 100%; position:relative">
    <div class="mainContainer-scroll" style="position:absolute;height:100%;width:100%;min-width:50%;min-height:50%;max-height:500%;top:0;left:0;-webkit-overflow-scrolling: touch !important;overflow-y:scroll !important">
            <iframe id="iframe_test" src="url.com" style="height: 100%; width:100%;min-width:100%;" name="myiFrameFix" allowfullscreen="yes" scrolling="yes">   </iframe>
    </div>
</div>

_ {Edit 3:} _ J'ai aussi essayé de supprimer tous les CSS qui incitent le navigateur à utiliser le GPU:

-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;

Cela n'a malheureusement pas résolu le bogue iOS d'iframe (essayé avec iOS 9 et 11).

Edit 4: Tentative de résolution du problème de rognage de l'iframe à l'aide d'un script, afin que la hauteur de l'iframe soit identique à celle du corps entier. Encore une fois, j'ai échoué.

<script>
    $(function() {
        var iframe = $("#iframe_test");    
        iframe.load(function() {
            $("body").height(iframe.height());
        });
    });
</script>
htmlioscssiframescroll
5
IceLady

Vérifiez ceci sur votre iPhone, le parchemin fonctionne bien. 

.nobottommargin {
  width: 500px;
  height: 500px;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}
iframe {
  height: 100%;
  width: 100%;
  border: none;
  display: block;
}
<div class="nobottommargin">
  <iframe src="http://www.weather.gov/" frameborder="0">
</iframe>
</div>

2
Shahil M

Il pourrait être intéressant d’inclure du code JavaScript externe dans une requête multimédia pour résoudre ce problème, qui est actuellement appliqué à chaque écran. 

1
Jack Bashford

Pour résoudre ce problème. Vous devez définir spécifiquement la hauteur sur l'iframe.

    .wrapper {
      -webkit-overflow-scrolling: touch;
    }
    <div class="wrapper">
      <iframe
        style="height: 500px"
      ></iframe>
    </div>

Le plus difficile est d’obtenir la hauteur de contenu de l’iframe. Vous pouvez laisser iframe indiquer à la page parent en utilisant window.postMessage si vous possédez l'iframe. Sinon, vous devez vérifier la hauteur périodiquement jusqu'à ce que vous pensiez qu'elle est corrigée.

var iframe = document.querySelector('iframe');
var setHeight = function(height) {
  iframe.style.height = height + 'px';
};
var getHeight = function() {
  return iframe.getRootNode().body.scrollHeight;
};
var prevHeight = 0;
var adjustHeight = function() {
  var height = getHeight();
  if (prevHeight !== height) {
    prevHeight = height;
    setTimeout(adjustHeight, 2000);
  } else {
    setHeight(height);
  }
};
setTimeout(adjustHeight, 2000);
0
Chef