Html2canvas: 处理媒体查询时在 IE11 中呈现错误

创建于 2019-08-30 · 7评论 · 资料来源: niklasvh/html2canvas

错误报告：

我在 1.0.0-rc3 中遇到了与 #1451 类似的问题。我有一些媒体查询 css，例如

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

在 Chrome 和 Edge 中，渲染结果是完美的。但是在 IE11 中，结果看起来像在小屏幕中。带有媒体查询的 div 的宽度与<strong i="12">@media</strong> screen and (max-width: 980px) {}中的 css 匹配。
然后我按照https://stackoverflow.com/questions/31793507/html2canvas-renders-page-with-wrong-layout-in-ie11-whed-devtools-not-opened#comment92407156_31800273中修改https的方向修改库cloneIframeContainer.width = (bounds.width + 1).toString(); 。但情况并没有改变。

还有一件很奇怪的事。 https://stackoverflow.com/questions/31793507/html2canvas-renders-page-with-wrong-layout-in-ie11-whed-devtools-not-opened#comment92407156_31800273中的情况也发生在我身上。打开 devtools 时，渲染效果很好。随着进一步研究。我发现如果我打开配置Always refresh from server ，它可以正常工作，但如果没有它，媒体查询就会出错。

测试过的 html2canvas 版本：1.0.0-rc3
浏览器及版本：IE11
操作系统：Win10

资料来源

jdsxzhao

最有用的评论

IE11 真的不是浏览器：;)

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

使用 html2canvas 在 IE11 中可能会发生很多磨损的事情（无论如何我的经验）。最好的方法是升级到边缘或使用其他现代浏览器。

bjornol 于 2019-08-30

😄3 👀1

所有7条评论

IE11 真的不是浏览器：;)

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

使用 html2canvas 在 IE11 中可能会发生很多磨损的事情（无论如何我的经验）。最好的方法是升级到边缘或使用其他现代浏览器。

bjornol 于 2019-08-30

😄3 👀1

事实上，我在 IE11 中的大部分页面都可以很好地与 h2c 配合使用。然而，这个问题让我抓狂！ :(

jdsxzhao 于 2019-08-30

我知道这种感觉：）

bjornol 于 2019-08-30

我找到了解决此问题的解决方法。看来这个问题的根本原因是IE中的缓存，因为清除缓存后媒体查询css可以正常工作。所以在 init h2c 之前，我获取所有关于 css 的链接标签并在 href 之后添加时间戳。因此，当 h2c 重新获取这些静态资源时，它将从服务器而不是缓存中获取。

            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 于 2019-09-02

我也遇到了同样的问题，请问你解决了吗？

scq000 于 2019-12-25

@jdsxzhao

scq000 于 2019-12-25

我一直在努力解决这个问题，虽然如上所述，以前的解决方案似乎没有解决当前代码库的问题，但我找到了一个放置解决问题的代码的地方。

而不是在 close() 调用之前做宽度 + 1 hack 我在 iframe 加载器承诺中的返回之前做了类似的事情，这里：

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

所以这个片段现在看起来像这样：

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 是为了避免通过字符串连接设置宽度，这将宽度乘以 10 倍，这在我们试图强制重新渲染时是过度的。

我还没有将它推广到生产环境，所以可能会有我在测试中没有发现的副作用，但到目前为止，事情看起来很有希望。

Robert-Laverick 于 2020-12-08

此页面是否有帮助？

0 / 5 - 0 等级

Html2canvas: 处理媒体查询时在 IE11 中呈现错误

错误报告：

最有用的评论

IE11 真的不是浏览器：;)

所有7条评论

IE11 真的不是浏览器：;)

相关问题