Html2canvas renders page with wrong layout in IE11 whed devtools not opened

问题

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.

When developer tools not opened it is rendered like for table/smartphones screen.
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.

This issue reproduced onli in IE11 and disappears once devtool are opened, so I event do not know how to debug it.

回答1:

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

回答2:

Just in case anybody encounters this like I did: html2canvas provides an onclone-method, in which you can touch the DOM before the screenshot is generated. This will also trigger the recomputation of styles in IE11.

html2canvas(
        document.body,
        {
            allowTaint: true,
            logging: false,
            onclone: function(document) {
                return $q(
                    function(resolve) {
                        $timeout(function() {
                            document.body.innerHTML = document.body.innerHTML; //<-- Hackerman was here
                            resolve();
                        }, 0);
                });
            }
        }
);

This did the trick for me, with the upside of me not having to modify the implementation i got from npm. - Though i'd love it if somebody has a better solution, since this seems quite hacky

来源：https://stackoverflow.com/questions/31793507/html2canvas-renders-page-with-wrong-layout-in-ie11-whed-devtools-not-opened

标签

twitter-bootstrap

html2canvas