Html2canvas: Erreur de rendu dans IE11 lors de la gestion d'une requête multimédia

Créé le 30 août 2019 · 7Commentaires · Source: niklasvh/html2canvas

Rapports de bogues :

J'ai rencontré un problème similaire avec #1451 dans 1.0.0-rc3. J'ai des css de requête multimédia tels que

<strong i="7">@media</strong> screen and (min-width: 1360px) {
...
}
<strong i="8">@media</strong> screen and (max-width: 1575px) {}
<strong i="9">@media</strong> screen and (max-width: 980px) {}

Dans Chrome et Edge, le rendu est parfait. Mais dans IE11, le résultat ressemble à un petit écran. La largeur de div avec media query correspond à css dans <strong i="12">@media</strong> screen and (max-width: 980px) {} .
Ensuite, je révise la bibliothèque en suivant la direction dans https://stackoverflow.com/questions/31793507/html2canvas-renders-page-with-wrong-layout-in-ie11-whed-devtools-not-opened#comment92407156_31800273 qui révise https : //github.com/niklasvh/html2canvas/blob/master/src/dom/document-cloner.ts#L429 à cloneIframeContainer.width = (bounds.width + 1).toString(); . Mais la situation n'a pas changé.

Encore une chose étrange. La situation dans https://stackoverflow.com/questions/31793507/html2canvas-renders-page-with-wrong-layout-in-ie11-whed-devtools-not-opened#comment92407156_31800273 m'est également arrivée. Lorsque devtools est ouvert, le rendu fonctionne bien. Avec d'autres recherches. J'ai trouvé que si j'ouvre la configuration Always refresh from server , cela peut bien fonctionner, mais sans cela, la requête multimédia se passera mal.

version html2canvas testée avec : 1.0.0-rc3
Navigateur & version : IE11
Système d'exploitation : Win10

Source

jdsxzhao

Commentaire le plus utile

IE11 n'est vraiment pas un navigateur : ;)

https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/

Beaucoup de choses d'usure peuvent se produire dans IE11 avec html2canvas (mon expérience en tout cas). Le meilleur moyen est de passer à Edge ou d'utiliser d'autres navigateurs modernes.

bjornol le 30 août 2019

😄3 👀1

Tous les 7 commentaires

IE11 n'est vraiment pas un navigateur : ;)

https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/

Beaucoup de choses d'usure peuvent se produire dans IE11 avec html2canvas (mon expérience en tout cas). Le meilleur moyen est de passer à Edge ou d'utiliser d'autres navigateurs modernes.

bjornol le 30 août 2019

😄3 👀1

En fait, la plupart de ma page dans IE11 fonctionne bien avec h2c. Cependant, ce problème me rend fou! :(

jdsxzhao le 30 août 2019

Je connais ce sentiment :)

bjornol le 30 août 2019

J'ai trouvé une solution de contournement pour résoudre ce problème. Il semble que la cause première de ce problème soit le cache dans IE, car la requête multimédia css peut bien fonctionner après l'effacement du cache. Donc, avant d'init h2c, je récupère toutes les balises de lien sur css et j'ajoute un horodatage après le href. En conséquence, lorsque h2c récupère ces ressources statiques, il récupère du serveur au lieu du cache.

            var links = document.getElementsByTagName('link');
            for(var i in links){
                if(links[i].href){
                    links[i].href = (links[i].href + "?timestamp=" + new Date().getTime());
                }
            }

jdsxzhao le 2 sept. 2019

J'ai également rencontré le même problème, avez-vous résolu ce problème ?

scq000 le 25 déc. 2019

@jdsxzhao

scq000 le 25 déc. 2019

J'ai eu du mal avec ce problème, et bien que, comme indiqué ci-dessus, les solutions précédentes ne semblent pas résoudre le problème avec la base de code actuelle, j'ai trouvé un endroit pour mettre le code qui résout le problème.

plutôt que de faire le hack largeur + 1 avant l'appel close(), j'ai fait quelque chose de similaire juste avant le retour à l'intérieur de la promesse du chargeur iframe, ici :

https://github.com/niklasvh/html2canvas/blob/3982df1492bdc40a8e5fa16877cc0291883c8e1a/src/dom/document-cloner.ts#L100

Donc ce fragment ressemble maintenant à ceci :

if (documentClone.fonts && documentClone.fonts.ready) {
  await documentClone.fonts.ready;
}

iframe.width = parseInt(iframe.width) + 1;

if (typeof onclone === 'function') {
  return Promise.resolve()
    .then(() => onclone(documentClone))
    .then(() => iframe);
}

le parseInt est d'éviter de définir la largeur par concaténation de chaînes, ce qui multiplie la largeur par 10x, ce qui est excessif lorsque nous essayons simplement de forcer un nouveau rendu.

Je ne l'ai pas encore mis en production, il pourrait donc y avoir des effets secondaires que je n'ai pas détectés lors de mes tests, mais les choses semblent prometteuses jusqu'à présent.