Render error in IE11 when deal with media query

[jdsxzhao]

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

[bjornol]

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.

[jdsxzhao]

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

[bjornol]

I know the feeling :)

[jdsxzhao]

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

[scq000]

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

[scq000]

@jdsxzhao

[Robert-Laverick]

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:

html2canvas/src/dom/document-cloner.ts

Line 100 in 3982df1

if (typeof onclone === 'function') {

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.