Html2canvas: Render error in IE11 when deal with media query

Created on 30 Aug 2019 · 7Comments · Source: niklasvh/html2canvas

Bug reports:

I have encountered a similiar problem with #1451 in 1.0.0-rc3. I have some media query css such as

@media screen and (min-width: 1360px) {
...
}
@media screen and (max-width: 1575px) {}
@media screen and (max-width: 980px) {}

In Chrome and Edge, the render result is perfect. But in IE11, the result looks like in small screen. The width of div with media query matches css in @media screen and (max-width: 980px) {}.
Then I revise the library following the direction in https://stackoverflow.com/questions/31793507/html2canvas-renders-page-with-wrong-layout-in-ie11-whed-devtools-not-opened#comment92407156_31800273 that revise https://github.com/niklasvh/html2canvas/blob/master/src/dom/document-cloner.ts#L429 to cloneIframeContainer.width = (bounds.width + 1).toString(); . But the situation is not changed.

One more werid thing. The situation in https://stackoverflow.com/questions/31793507/html2canvas-renders-page-with-wrong-layout-in-ie11-whed-devtools-not-opened#comment92407156_31800273 also happened to me. When open devtools, the render works well. With further research. I found that if I open the config Always refresh from server, it can work well, but without that the media query will go wrong.

html2canvas version tested with: 1.0.0-rc3
Browser & version: IE11
Operating system: Win10

Source

jdsxzhao

Most helpful comment

IE11 is really not a browser: ;)

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

Allot of weard stuff can happen in IE11 with html2canvas (my experience anyway). Best way is to upgrade to edge or use other modern browsers.

bjornol on 30 Aug 2019

😄3 👀1

All 7 comments

IE11 is really not a browser: ;)

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

Allot of weard stuff can happen in IE11 with html2canvas (my experience anyway). Best way is to upgrade to edge or use other modern browsers.

bjornol on 30 Aug 2019

😄3 👀1

In fact, most of my page in IE11 works well with h2c. However, this problem drives me mad! :(

jdsxzhao on 30 Aug 2019

I know the feeling :)

bjornol on 30 Aug 2019

I have found a workaround to solve this problem. It seems that the root cause of this problem is the cache in IE because the media query css can work well after clear cache. So before init h2c, I fetch all the link tag about css and add timestamp after the href. As a result, when h2c refetch these static resources, it will fetch from server instead of 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 on 2 Sep 2019

I also have met the same problem, have you solved this problem?

scq000 on 25 Dec 2019

@jdsxzhao

scq000 on 25 Dec 2019

I've been struggling with this issue, and while as reported above the previous solutions don't seem to fix the issue with the current codebase I have found a place to put the code that does resolve the issue.

rather than doing the width + 1 hack before the close() call I've done something similar just before the return inside the iframe loader promise, here:

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

So that fragment now looks like this:

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

the parseInt is to avoid setting the width by string concatenation, which multiplies the width by 10x which is overkill when we're just trying to force a re-render.

I've not yet rolled this out to production so there could yet be side effects that I've not caught in my testing, but things look promising so far.