Render error in IE11 when deal with media query

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.

[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:

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.