Html2canvas: Erro de renderização no IE11 ao lidar com consulta de mídia

Criado em 30 ago. 2019 · 7Comentários · Fonte: niklasvh/html2canvas

Relatório de erros:

Eu encontrei um problema semelhante com # 1451 em 1.0.0-rc3. Eu tenho alguns css de consulta de mídia, 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) {}

No Chrome e no Edge, o resultado da renderização é perfeito. Mas no IE11, o resultado parece uma tela pequena. A largura da div com a consulta de mídia corresponde a css em <strong i="12">@media</strong> screen and (max-width: 980px) {} .
Em seguida, eu reviso a biblioteca seguindo a orientação em 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(); . Mas a situação não mudou.

Mais uma coisa werid. A situação em https://stackoverflow.com/questions/31793507/html2canvas-renders-page-with-wrong-layout-in-ie11-whed-devtools-not-opened#comment92407156_31800273 também aconteceu comigo. Ao abrir devtools, a renderização funciona bem. Com mais pesquisas. Descobri que se eu abrir a configuração Always refresh from server , ela pode funcionar bem, mas sem isso a consulta de mídia vai dar errado.

Versão html2canvas testada com: 1.0.0-rc3
Navegador e versão: IE11
Sistema operacional: Win10

Fonte

jdsxzhao

Comentários muito úteis

O IE11 não é realmente um navegador:;)

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

Muitas coisas do weard podem acontecer no IE11 com html2canvas (minha experiência de qualquer maneira). A melhor maneira é atualizar para o edge ou usar outros navegadores modernos.

bjornol em 30 ago. 2019

😄3 👀1

Todos 7 comentários

O IE11 não é realmente um navegador:;)

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

Muitas coisas do weard podem acontecer no IE11 com html2canvas (minha experiência de qualquer maneira). A melhor maneira é atualizar para o edge ou usar outros navegadores modernos.

bjornol em 30 ago. 2019

😄3 👀1

Na verdade, a maior parte da minha página no IE11 funciona bem com h2c. No entanto, esse problema me deixa louco! :(

jdsxzhao em 30 ago. 2019

Eu conheço o sentimento :)

bjornol em 30 ago. 2019

Eu encontrei uma solução alternativa para resolver este problema. Parece que a causa raiz desse problema é o cache no IE, porque o css de consulta de mídia pode funcionar bem depois de limpar o cache. Portanto, antes do init h2c, eu busco todas as tags de link sobre css e adiciono o carimbo de data / hora após o href. Como resultado, quando h2c refetch esses recursos estáticos, ele irá buscar do servidor em vez de 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 em 2 set. 2019

Eu também encontrei o mesmo problema, você resolveu este problema?

scq000 em 25 dez. 2019

@jdsxzhao

scq000 em 25 dez. 2019

Tenho lutado com esse problema e, embora, conforme relatado acima, as soluções anteriores não pareçam resolver o problema com a base de código atual, encontrei um lugar para colocar o código que resolve o problema.

em vez de fazer o corte de largura + 1 antes da chamada de close (), fiz algo semelhante antes do retorno dentro da promessa do carregador de iframe, aqui:

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

Então, esse fragmento agora se parece com isto:

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

o parseInt é para evitar definir a largura por concatenação de string, que multiplica a largura por 10x, o que é um exagero quando estamos apenas tentando forçar uma nova renderização.

Ainda não coloquei isso em produção, então pode haver efeitos colaterais que não detectei em meus testes, mas as coisas parecem promissoras até agora.