Html2canvas: Rendering on IE is totally different from Chrome and Firefox

[briankitt]

I have just standard html page, nothing fancy, no images. It works beautifully in Chrome and Firefox, and IE is just a garbled mess. Not that I expected anything different, but sadly, we have a lot of IE users, I really need this to work. We have a variety of versions, I have seen this happen on IE 10 and IE 11 both.

[dfiori]

Thanks for your feedback. I know IE is really bad as browser. If you can explain some basic "how it works" of your library maybe I can try to undertand why these issues happens and help you with your code.

[briankitt]

I am a developer, and I detest IE. It absolutely never works right. I would gladly give you any code you need.

I use Bootstrap and Knockout very heavily in my app. The downside, is my app is very dependent on our Oracle database, and we do not currently have an external server that I could give you access to the UI. I can give you screen prints if needed, just let me know what you need.

This is a feedback system that I built, and it works perfect on Firefox and Chrome. But in IE, it’s almost as if IE doesn’t understand the CSS. The data elements are all out of whack.

See the screen print attached.

Here is a feedback screen print captured from Firefox, it works great.

https://dl.dropboxusercontent.com/1/view/zl56we9cwiudmb1/ACS.Data/Feedback/Screen_0001442.png

This is a feedback item (from a different screen) opened on I.E.

https://dl.dropboxusercontent.com/1/view/z843plk200zuc0u/ACS.Data/Feedback/Screen_0001468.png

This is my code to do the canvas.

html2canvas($form, {

allowTaint: true,

logging: false,

timeout: 0,

}).then(function (canvas) {

var canvasData = canvas.toDataURL();

var jsonData = {

    UI_FDB_FORM: url,

    UI_FDB_MODEL: model,

    UI_FDB_AAAMBR: getCurrMbr(),

    UI_FDB_IMAGEDATA: canvasData.replace(/^data[:]image\/(png|jpg|jpeg)[;]base64,/i, ""),

}

DoDialog('Site Feedback', '/Common/Feedback', 900, jsonData);

});

This is the HTML for the ‘header’ section which is all wacked out. This uses standard bootstrap classes.

Address 1:

Status:

Exp Date:

Agent:

Class:

Address 2:

Program:

Due:

Bill Date:

Years AAA:

City:

, 

 

-

Phone:

Bill Sent:

Years Local:

From: dfiori [mailto:[email protected]]
Sent: Thursday, September 24, 2015 10:20 AM
To: niklasvh/html2canvas [email protected]
Cc: Brian Kitt [email protected]
Subject: Re: [html2canvas] Rendering on IE is totally different from Chrome and Firefox (#678)

Thanks for your feedback. I know IE is really bad as browser. If you can explain some basic "how it works" of your library maybe I can try to undertand why these issues happens and help you with your code.

—
Reply to this email directly or view it on GitHub https://github.com/niklasvh/html2canvas/issues/678#issuecomment-142960567 . https://github.com/notifications/beacon/AC4z-Kr_N3vZIH8CnEx3WbgXN9Qk1ec6ks5o1Aw0gaJpZM4GAtaU.gif

---

This email has been checked for viruses by Avast antivirus software.
https://www.avast.com/antivirus

[NPC]

@briankitt You probably know this already, but just in case—if you use your site on a local network, IE can switch it to compatibility mode rendering, which is IE7 or close. So your statement about “doesn't understand CSS” may actually be correct—make sure to switch to a recent IE version, and it is better (though not ideal).

I am testing html2canvas on a fairly complex page with IE11, and it works fine for all regular markup—only struggles with SVG (which I am still trying to figure out).

[briankitt]

Our users are using a wide variety of versions of IE. This is a new app, and not yet live. Once it goes live, it will be in use in a multitude of offices, in different states, of which I have absolutely no control over. I am unfortunately in a position where I cannot dictate them to upgrade, nor can I dictate them to change browsers or browser settings. (I’m sure you’ve been there many times).

When you talk about compatibility mode rendering, are you talking about F12 and changing the mode? That’s not an option for me, due to how the rollout will be.

Or are you talking about using a different DOCTYPE, if so, let me know which one you use.

If you are talking about a third option, I’m all ears. The only ways I know how to force IE to use compatibility is with F12 (developer tools) or DOCTYPE. If there is another way, I missed it.

Thanks

From: Anton Maslo [mailto:[email protected]]
Sent: Thursday, September 24, 2015 1:30 PM
To: niklasvh/html2canvas [email protected]
Cc: Brian Kitt [email protected]
Subject: Re: [html2canvas] Rendering on IE is totally different from Chrome and Firefox (#678)

@briankitt https://github.com/briankitt You probably know this already, but just in case—if you use your site on a local network, IE can switch it to compatibility mode rendering, which is IE7 or close. So your statement about “doesn't understand CSS” may actually be correct—make sure to switch to a recent IE version, and it is better (though not ideal).

I am testing html2canvas on a fairly complex page with IE11, and it works fine for all regular markup—only struggles with SVG (which I am still trying to figure out).

—
Reply to this email directly or view it on GitHub https://github.com/niklasvh/html2canvas/issues/678#issuecomment-143012565 . https://github.com/notifications/beacon/AC4z-Nc8V-YdJIjPEl1JZRjXy0GwpyOGks5o1DiOgaJpZM4GAtaU.gif

---

This email has been checked for viruses by Avast antivirus software.
https://www.avast.com/antivirus

[NPC]

@briankitt I'd just start with opening F12 and checking what rendering mode IE is using on your PC when you have the issue that you mention above. May be it is not a compatibility mode issue at all, but will help narrow it down.

[GertVen]

Seem to be having a similar problem here; for some reason if I were to take a screenshot in IE of some bootstrap columns everything would be rendered under each other with a width of 100% whereas in Chrome and Firefox the screenshot will show the correct display. BUT if I were to just open the developer console, not even making any changes, the IE screenshots would be rendered correctly as well.

Any ideas?

[NPC]

@GertVen I had this issue: for some reason html2canvas was using the CSS from media-queries (i.e., for mobile screens—this is why columns are 100%).

I didn't find a proper solution for it, neither could I reproduce this issue in JSFiddle, so I had to add a class “exporting” to the whole document, and enforce correct element sizes for that class.

Not a very nice workaround, so I'd be glad if there was a better solution.

[briankitt]

We have been using HTML2CANVAS for screen prints for feedback for about 2 months.

Chrome seems to work 100% of the time.
Firefox seems to work 100% of the time.

I.E. seems to work about 80% of the time. It’s really hit and miss. Most people using it are on IE 11, but we have some IE 10 and some IE 9. However, the ‘mess up’ does not seem related to browser version. We are still trying to collect information to narrow it down. We have tried a number of things, but I had not thought about the ‘exporting’ example below. Not exactly sure what you are saying by ‘enforce correct sizes’?

From: Anton Maslo [mailto:[email protected]]
Sent: Tuesday, September 29, 2015 10:41 AM
To: niklasvh/html2canvas [email protected]
Cc: Brian Kitt [email protected]
Subject: Re: [html2canvas] Rendering on IE is totally different from Chrome and Firefox (#678)

@GertVen https://github.com/GertVen I had this issue: for some reason html2canvas was using the CSS from media-queries (i.e., for mobile screens—this is why columns are 100%).

I didn't find a proper solution for it, neither could I reproduce this issue in JSFiddle, so I had to add a class “exporting” to the whole document, and enforce correct element sizes for that class.

Not a very nice workaround, so I'd be glad if there was a better solution.

—
Reply to this email directly or view it on GitHub https://github.com/niklasvh/html2canvas/issues/678#issuecomment-144097651 . https://github.com/notifications/beacon/AC4z-KjyzgN-6XJLKQmC4w1Qxp03fna0ks5o2qh9gaJpZM4GAtaU.gif

---

This email has been checked for viruses by Avast antivirus software.
https://www.avast.com/antivirus

[NPC]

@briankitt I've looked up my code, and here's how I modified the media query to not apply when exporting:

@media only screen and (max-width: 767px) {
    body:not(.export-mode) .dashboard-widget {
        position: relative;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            margin-bottom: 10px;
    }
}

So what this does, is when body has .export-mode class, these styles are not applied.

I got away fairly easily, since I only have a handful of rules that caused the issue, yet if you have something like Bootstrap, with hundreds of rules, this solution may not be practical for you. Still, may be it will set you on the path to find a better solution—please share it with us if you do.

Here's the fiddle where I tried to reproduce this issue, with no success: http://jsfiddle.net/NPC42/Luwasouk/

[briankitt]

We use dozens of rules, not 100s, but I do understand your point. Any time I start using a rule that is not defined below, then I run into trouble again.

I will work with this, and see what we can do. Thanks

From: Anton Maslo [mailto:[email protected]]
Sent: Tuesday, September 29, 2015 1:14 PM
To: niklasvh/html2canvas [email protected]
Cc: Brian Kitt [email protected]
Subject: Re: [html2canvas] Rendering on IE is totally different from Chrome and Firefox (#678)

@briankitt https://github.com/briankitt I've looked up my code, and here's how I modified the media query to not apply when exporting:

@media only screen and (max-width: 767px) {
body:not(.export-mode) .dashboard-widget {
position: relative;
top: 0 !important;
left: 0 !important;
width: 100% !important;
margin-bottom: 10px;
}
}

So what this does, is when body has .export-mode class, these styles are not applied.

I got away fairly easily, since I only have a handful of rules that caused the issue, yet if you have something like Bootstrap, with hundreds of rules, this solution may not be practical for you. Still, may be it will set you on the path to find a better solution—please share it with us if you do.

Here's the fiddle where I tried to reproduce this issue, with no success: http://jsfiddle.net/NPC42/Luwasouk/

—
Reply to this email directly or view it on GitHub https://github.com/niklasvh/html2canvas/issues/678#issuecomment-144140687 . https://github.com/notifications/beacon/AC4z-OP5t3cFMI_HGvWm605xE7fw9dWVks5o2sx9gaJpZM4GAtaU.gif

---

This email has been checked for viruses by Avast antivirus software.
https://www.avast.com/antivirus

[Khemendra]

RESOLVED.

Please do changes in your html2canvas.js as per:
https://stackoverflow.com/questions/31793507/html2canvas-renders-page-with-wrong-layout-in-ie11-whed-devtools-not-opened

[br0k3NaN]

Sorry but im using bower to manage this, so how i can change this without change the vendor folder? This is not a good way to manage, i think....

Anyone know a good way to fix it without manipulate vendor folder ?
Just because in my case we have a jenkins to update automatically, so was nice if we fix this issue in master branch here OR have other way to do that. I'll keep working on it to try fix it to.

Thanks.

[niklasvh]

Is this still an issue with v1.0.0? If so, could you please share an example on jsfiddle.

[briankitt]

I am no longer on this project, I can't answer that question.

[no-response[bot]]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

[GertVen]

@niklasvh Though I am not the author of this issue, I have tested the newest version with IE11 and still get the same issue. I'm struggling to replicate a jsfiddle example so I've prepared an example application which can be found at another issue post: https://github.com/niklasvh/html2canvas/issues/1451

Works perfectly in Edge and Chrome but still wraps columns in IE

[AmritaAcc]

I am also facing similar issue while using html2canvas in IE11. Extra space is getting added in PDF. Working fine with other browsers

[cansukaraman]

I am also facing similar issue while using html2canvas in IE11. Extra space is getting added in PDF. Working fine with other browsers

did you solve this problem