web-dev-qa-db-fra.com

navigateur iOS - iFrame passe au premier plan lorsque vous modifiez des contenus CSS ou du contenu à l'aide de JavaScript

Ce problème semble avoir été autour pour toujours. Dans certaines circonstances spécifiques, les navigateurs iOS font état de ce bug frustrant.

Le problème:

Si vous avez une page Web contenant un iFrame et que vous modifiez le document de contenu iFrames par programme, l'iFrame passe en haut de la page. Toutefois, cela ne se produit que si la page, avant la manipulation du DOM, dépasse une certaine hauteur. En règle générale, cette longueur semble être supérieure à deux fois la longueur de la fenêtre d'affichage.

Ce problème apparaît, que vous modifiiez la structure DOM ou que vous modifiez les propriétés de style.

Ce bogue n'est présent que sur iOS, y compris la dernière version mise à jour (9.2).

javascriptioscssiframebrowser
26
Matt

Description du problème:

Le problème semble être que les navigateurs sous iOS (y compris chrome car il utilise le même moteur de rendu ) ne calculent pas correctement la hauteur des iFrames, ce qui provoque un comportement sautant lorsque des repeints se produisent sur le navigateur.

Les solutions:

Solution A: L'ajout du code suivant à la feuille de style iFrame résout le problème dans la plupart des cas, bien que le défilement pour les événements de glisser, etc. puisse présenter des problèmes avec cette approche.

html, body {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

Solution B: Lorsque l'iFrame a tout rendu, vous devez calculer la hauteur du contenu iFrame, puis définir cette valeur de hauteur explicitement sur l'élément iFrame à l'aide d'un style inline en javascript. Cette valeur doit être mise à jour au fur et à mesure que le contenu est modifié ou ajouté dans l'iFrame, vous devez vous assurer que la hauteur est toujours correcte pour éviter que les sauts ne se reproduisent.

Cela pose des problèmes lorsque vous utilisez des plug-ins tiers et des widgets qui modifient la page sans rappel évident. Le meilleur des cas pour traiter cette question pour l'instant est l'utilisation de observateurs de mutation .

41
Matt

J'ai trouvé une solution dans Ionic 3, il peut installer le clavier natif et désactiver l'autofocus sur l'entrée, avec le code suivant

importer {Keyboard} de '@ ionic-native/keyboard';

this.Keyboard.disableScroll (true);

0
Boris Benalcazar

Si vous utilisez un code comme celui-ci 

var doc = document.getElementById(id).contentWindow.document;
doc.open();
doc.write(data);
doc.close();

Essayez de supprimer doc.close(); Cela m'a aidé.

0
Eugene