Html2canvas: Error de renderizado en IE11 cuando se trata de una consulta de medios

Creado en 30 ago. 2019 · 7Comentarios · Fuente: niklasvh/html2canvas

Informes de errores:

Me he encontrado con un problema similar con # 1451 en 1.0.0-rc3. Tengo algunos css de consulta de medios como

<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) {}

En Chrome y Edge, el resultado del renderizado es perfecto. Pero en IE11, el resultado se ve en pantalla pequeña. El ancho de div con media query coincide con css en <strong i="12">@media</strong> screen and (max-width: 980px) {} .
Luego reviso la biblioteca siguiendo la dirección en https://stackoverflow.com/questions/31793507/html2canvas-renders-page-with-wrong-layout-in-ie11-whed-devtools-not-opened#comment92407156_31800273 que revisa https: //github.com/niklasvh/html2canvas/blob/master/src/dom/document-cloner.ts#L429 a cloneIframeContainer.width = (bounds.width + 1).toString(); . Pero la situación no cambia.

Una cosa más horrible. La situación en https://stackoverflow.com/questions/31793507/html2canvas-renders-page-with-wrong-layout-in-ie11-whed-devtools-not-opened#comment92407156_31800273 también me sucedió. Cuando abre devtools, el render funciona bien. Con más investigación. Descubrí que si abro la configuración Always refresh from server , puede funcionar bien, pero sin eso, la consulta de medios saldrá mal.

html2canvas versión probada con: 1.0.0-rc3
Navegador y versión: IE11
Sistema operativo: Win10

Fuente

jdsxzhao

Comentario más útil

IE11 realmente no es un navegador:;)

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

Muchas cosas extrañas pueden suceder en IE11 con html2canvas (mi experiencia de todos modos). La mejor forma es actualizar a Edge o utilizar otros navegadores modernos.

bjornol en 30 ago. 2019

😄3 👀1

Todos 7 comentarios

IE11 realmente no es un navegador:;)

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

Muchas cosas extrañas pueden suceder en IE11 con html2canvas (mi experiencia de todos modos). La mejor forma es actualizar a Edge o utilizar otros navegadores modernos.

bjornol en 30 ago. 2019

😄3 👀1

De hecho, la mayor parte de mi página en IE11 funciona bien con h2c. Sin embargo, ¡este problema me vuelve loco! :(

jdsxzhao en 30 ago. 2019

Conozco el sentimiento :)

bjornol en 30 ago. 2019

Encontré una solución para resolver este problema. Parece que la causa raíz de este problema es la caché en IE porque la consulta de medios css puede funcionar bien después de borrar la caché. Entonces, antes de init h2c, busco todas las etiquetas de enlace sobre css y agrego la marca de tiempo después de href. Como resultado, cuando h2c recupere estos recursos estáticos, los recuperará del servidor en lugar de la caché.

            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 en 2 sept. 2019

También me he encontrado con el mismo problema, ¿has resuelto este problema?

scq000 en 25 dic. 2019

@jdsxzhao

scq000 en 25 dic. 2019

He estado luchando con este problema, y aunque, como se informó anteriormente, las soluciones anteriores no parecen solucionar el problema con la base de código actual, he encontrado un lugar para colocar el código que resuelve el problema.

en lugar de hacer el hack de ancho + 1 antes de la llamada close (), hice algo similar justo antes del retorno dentro de la promesa del cargador de iframe, aquí:

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

Entonces ese fragmento ahora se ve así:

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 es para evitar establecer el ancho por concatenación de cadenas, que multiplica el ancho por 10 veces, lo cual es excesivo cuando solo estamos tratando de forzar una nueva renderización.

Todavía no he implementado esto en producción, por lo que aún podría haber efectos secundarios que no he detectado en mis pruebas, pero las cosas parecen prometedoras hasta ahora.