Html2canvas使用未打开的IE11工具在IE11中呈现页面布局错误 [英] Html2canvas renders page with wrong layout in IE11 whed devtools not opened
问题描述
我正在尝试解决与通过IE11中的html2canvas将网页呈现到画布相关的错误.问题有点令人困惑:网站使用bootstrap 2.3网格实现负责任的布局.
I am trying to fix bug in related to rendering web page to canvas via html2canvas in IE11. Issues is a bit confusing: site implements responsible layout with bootstrap 2.3 grid.
-
当开发人员工具未打开时，它呈现为用于表格/智能手机屏幕.
但是，如果我按F12键(开发人员工具打开，则未执行任何其他操作)，然后单击以呈现按预期呈现的页面，以实现宽屏.
But if I press F12 (developer tools opens, no any other action performed) and click to render page it rendered as expected, for wide screen.
已删除到旧应用程序的过时链接.不是，它不存在于指定地址上.
Removed outdated link to old application. Not it does not exists on specified address.
此问题仅在IE11中复制，并且在打开devtool后消失了，所以我不知道如何调试它.
This issue reproduced onli in IE11 and disappears once devtool are opened, so I event do not know how to debug it.
推荐答案
我实际上不知道IE11到底是什么，但我找到了一种快速的猴子修补方法来解决它:
I am actually do not know what the hell with IE11, but I found a fast monkey-patching way to solve it:
return new Promise(function(resolve) {
var documentClone = container.contentWindow.document;
/* Chrome doesn't detect relative background-images assigned in inline <style> sheets when fetched through getComputedStyle
if window url is about:blank, we can assign the url to current by writing onto the document
*/
container.contentWindow.onload = container.onload = function() {
var interval = setInterval(function() {
if (documentClone.body.childNodes.length > 0) {
initNode(documentClone.documentElement);
clearInterval(interval);
if (options.type === "view") {
container.contentWindow.scrollTo(x, y);
if ((/(iPad|iPhone|iPod)/g).test(navigator.userAgent) && (container.contentWindow.scrollY !== y || container.contentWindow.scrollX !== x)) {
documentClone.documentElement.style.top = (-y) + "px";
documentClone.documentElement.style.left = (-x) + "px";
documentClone.documentElement.style.position = 'absolute';
}
}
resolve(container);
}
}, 50);
};
documentClone.open();
documentClone.write("<!DOCTYPE html><html></html>");
// Chrome scrolls the parent document for some reason after the write to the cloned window???
restoreOwnerScroll(ownerDocument, x, y);
documentClone.replaceChild(documentClone.adoptNode(documentElement), documentClone.documentElement);
/*
#HERE
1) It seems IE 11 does not get right computed styles when clones a node (See function cloneNode) above.
2) In documentClone.replaceChild(...) IE 11 does not apply @media instructions.
That's can be checked
by alert('ndocumentClone ' + $('.row-fluid [class*="span"]', documentClone).css('float'));
or alert('documentElement ' + $('.row-fluid [class*="span"]', documentElement).css('float'));
These both statments shows 'left' for wide screen in Chrome and shows none in IE11 (without dev panel).
To fix that we need to re-apply styles somehow. Change the container width works but probably a better
way exists. Lets have this in mind.
*/
container.width = width + 1;
/* * */
documentClone.close();
});
这篇关于Html2canvas使用未打开的IE11工具在IE11中呈现页面布局错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
