Html2canvas: Renderfehler in IE11 beim Umgang mit Medienabfragen
Fehlerberichte:
Ich habe ein ähnliches Problem mit #1451 in 1.0.0-rc3 festgestellt. Ich habe ein CSS für Medienabfragen wie z
<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) {}
In Chrome und Edge ist das Renderergebnis perfekt. Aber im IE11 sieht das Ergebnis wie auf einem kleinen Bildschirm aus. Die Breite von div mit Medienabfrage stimmt mit css in <strong i="12">@media</strong> screen and (max-width: 980px) {} überein.
Dann überarbeite ich die Bibliothek gemäß den Anweisungen in https://stackoverflow.com/questions/31793507/html2canvas-renders-page-with-wrong-layout-in-ie11-whed-devtools-not-opened#comment92407156_31800273 , die https überarbeiten cloneIframeContainer.width = (bounds.width + 1).toString(); . Aber die Situation ändert sich nicht.
Noch eine komische Sache. Die Situation in https://stackoverflow.com/questions/31793507/html2canvas-renders-page-with-wrong-layout-in-ie11-whed-devtools-not-opened#comment92407156_31800273 ist mir auch passiert. Bei geöffneten Devtools funktioniert das Rendern gut. Mit weiteren Recherchen. Ich habe festgestellt, dass es gut funktionieren kann, wenn ich die Konfiguration Always refresh from server öffne, aber ohne das geht die Medienabfrage schief.
- html2canvas-Version getestet mit: 1.0.0-rc3
- Browser & Version: IE11
- Betriebssystem: Win10
jdsxzhao
Alle 7 Kommentare
IE11 ist wirklich kein Browser: ;)
Eine Menge abgenutzter Sachen kann in IE11 mit html2canvas passieren (meine Erfahrung jedenfalls). Der beste Weg ist, auf Edge zu aktualisieren oder andere moderne Browser zu verwenden.
bjornol
am 30. Aug. 2019
Tatsächlich funktioniert der größte Teil meiner Seite in IE11 gut mit h2c. Dieses Problem macht mich jedoch wahnsinnig! :(
jdsxzhao
am 30. Aug. 2019
Ich kenne das Gefühl :)
bjornol
am 30. Aug. 2019
Ich habe einen Workaround gefunden, um dieses Problem zu lösen. Es scheint, dass die Hauptursache für dieses Problem der Cache im IE ist, da die Medienabfrage-CSS nach dem Löschen des Caches gut funktionieren kann. Bevor ich h2c initiere, rufe ich alle Link-Tags über CSS ab und füge einen Zeitstempel nach dem href hinzu. Infolgedessen holt h2c diese statischen Ressourcen beim erneuten Abrufen vom Server statt aus dem 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());
}
}
Das gleiche Problem habe ich auch schon, hast du dieses Problem gelöst?
scq000
am 25. Dez. 2019
@jdsxzhao
scq000
am 25. Dez. 2019
Ich habe mit diesem Problem zu kämpfen, und obwohl die vorherigen Lösungen, wie oben berichtet, das Problem mit der aktuellen Codebasis nicht zu beheben scheinen, habe ich einen Ort gefunden, an dem der Code abgelegt werden kann, der das Problem behebt.
Anstatt den width + 1-Hack vor dem close()-Aufruf zu machen, habe ich etwas Ähnliches kurz vor der Rückgabe innerhalb des iframe-Loader-Versprechens gemacht, hier:
Das Fragment sieht jetzt also so aus:
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);
}
parseInt soll vermeiden, die Breite durch Verkettung von Zeichenfolgen festzulegen, wodurch die Breite mit 10x multipliziert wird, was übertrieben ist, wenn wir nur versuchen, ein erneutes Rendern zu erzwingen.
Ich habe dies noch nicht in die Produktion eingeführt, daher könnte es noch Nebenwirkungen geben, die ich bei meinen Tests nicht festgestellt habe, aber die Dinge sehen bisher vielversprechend aus.
Robert-Laverick
am 8. Dez. 2020
Verwandte Themen
ABHIKSINGHH
·
3Kommentare
kunal886496
·
3Kommentare
Josh10101010
·
3Kommentare
bishwapoudel
·
4Kommentare
deepender87
·
4Kommentare
Hilfreichster Kommentar
IE11 ist wirklich kein Browser: ;)
https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/
Eine Menge abgenutzter Sachen kann in IE11 mit html2canvas passieren (meine Erfahrung jedenfalls). Der beste Weg ist, auf Edge zu aktualisieren oder andere moderne Browser zu verwenden.