New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IE11: Exported PNG/JPG of chart is blank #5410

Closed
mjsteichen opened this Issue Jun 16, 2016 · 14 comments

Comments

Projects
None yet
5 participants
@mjsteichen

mjsteichen commented Jun 16, 2016

Expected behaviour

Exported png/jpg in IE11 contains plot, including images axis labels, when using offline exporting module (we don't have the option of falling back to the export server for the project I'm working on).

Actual behaviour

Exported png/jpg is blank.

Live demo with steps to reproduce

http://jsfiddle.net/msteichen/d79qht46/1/

Download as png or jpg and open exported file. (downloading as SVG works as expected).

Affected browser(s)

IE11

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Jun 17, 2016

Collaborator

According to http://www.highcharts.com/docs/export-module/client-side-export the combination of inline images and IE11 gives a "suboptimal image" which I can confirm.

@oysteinmoseng In this case where the image is utterly useless, should we throw an error or fall back to the export server?

Collaborator

TorsteinHonsi commented Jun 17, 2016

According to http://www.highcharts.com/docs/export-module/client-side-export the combination of inline images and IE11 gives a "suboptimal image" which I can confirm.

@oysteinmoseng In this case where the image is utterly useless, should we throw an error or fall back to the export server?

@oysteinmoseng

This comment has been minimized.

Show comment
Hide comment
@oysteinmoseng

oysteinmoseng Jun 17, 2016

Collaborator

@TorsteinHonsi: Sounds like a plan. We'll probably have to do browser detection, though. If I remember correctly, the canvas functions return successfully despite the useless image.

Collaborator

oysteinmoseng commented Jun 17, 2016

@TorsteinHonsi: Sounds like a plan. We'll probably have to do browser detection, though. If I remember correctly, the canvas functions return successfully despite the useless image.

@jon-a-nygaard

This comment has been minimized.

Show comment
Hide comment
@jon-a-nygaard

jon-a-nygaard Jun 17, 2016

Collaborator

@TorsteinHonsi @oysteinmoseng I forgot to mention this, but I tried the same fiddle and removed the images, then it still did not work for png, but it worked for jpg.
Windows 10 and IE 11

Collaborator

jon-a-nygaard commented Jun 17, 2016

@TorsteinHonsi @oysteinmoseng I forgot to mention this, but I tried the same fiddle and removed the images, then it still did not work for png, but it worked for jpg.
Windows 10 and IE 11

@oysteinmoseng

This comment has been minimized.

Show comment
Hide comment
@oysteinmoseng

oysteinmoseng Jun 17, 2016

Collaborator

@jon-a-nygaard: Weird, the code for PNG and JPEG should be identical except for a parameter to the canvas converting function. I'm pretty sure IE11 PNG used to work in Windows 7. I'll look into it.

We should probably also provide an example of a hook where the user can do his own browser detection or whatever, and force a fallback.

Collaborator

oysteinmoseng commented Jun 17, 2016

@jon-a-nygaard: Weird, the code for PNG and JPEG should be identical except for a parameter to the canvas converting function. I'm pretty sure IE11 PNG used to work in Windows 7. I'll look into it.

We should probably also provide an example of a hook where the user can do his own browser detection or whatever, and force a fallback.

@aaronogan

This comment has been minimized.

Show comment
Hide comment
@aaronogan

aaronogan Jun 17, 2016

In our particular case, we're not able to fall back to the export server (and we're also trying to avoid setting up our own export server).

It seems that the problem could be stemming from the usage of blob. Could we use an alternative such as this that uses XMLSerializer.serializeToString()?

aaronogan commented Jun 17, 2016

In our particular case, we're not able to fall back to the export server (and we're also trying to avoid setting up our own export server).

It seems that the problem could be stemming from the usage of blob. Could we use an alternative such as this that uses XMLSerializer.serializeToString()?

@oysteinmoseng

This comment has been minimized.

Show comment
Hide comment
@oysteinmoseng

oysteinmoseng Jun 23, 2016

Collaborator

IE is acting really weird here. As an example: Running Windows 7 and IE11, attempting to export to either PNG or JPEG (without embedded images) will fail on the first try, but subsequent exports are fine. Running Windows 10 with IE11, PNG export always fails, and JPEG always succeeds.

I've tried falling back to various data URIs as well as using XMLSerializer and Base64 objects, but so far no luck. Will continue to investigate.

The gist you linked to, @aaronogan, also mentions potential issues with namespaces in the SVG, but those do not seem to apply to IE11, at least in our case.

It's worth mentioning that Edge (13) always fails, but at least gracefully falls back to the export server.

Collaborator

oysteinmoseng commented Jun 23, 2016

IE is acting really weird here. As an example: Running Windows 7 and IE11, attempting to export to either PNG or JPEG (without embedded images) will fail on the first try, but subsequent exports are fine. Running Windows 10 with IE11, PNG export always fails, and JPEG always succeeds.

I've tried falling back to various data URIs as well as using XMLSerializer and Base64 objects, but so far no luck. Will continue to investigate.

The gist you linked to, @aaronogan, also mentions potential issues with namespaces in the SVG, but those do not seem to apply to IE11, at least in our case.

It's worth mentioning that Edge (13) always fails, but at least gracefully falls back to the export server.

@oysteinmoseng

This comment has been minimized.

Show comment
Hide comment
@oysteinmoseng

oysteinmoseng Jun 24, 2016

Collaborator

Found that most of our issues with IE11 are caused by an evasive bug in the browser where the image load handler is sometimes called before the image is actually ready. Deferring the load handler with a small timeout seems to stabilize things.

Also found that Edge has a bug where it capitalizes several SVG attribute names (fill="red" becomes FILL="red"), which appears to mess up things across the board. I got downloading to work by using CanVG, but because of this bug the rendering is all wrong.

Can't promise that I can get all of these browsers to accept embedded images, but at least for normal charts we should have a working fix over the weekend, and graceful fallback to the export server.

Collaborator

oysteinmoseng commented Jun 24, 2016

Found that most of our issues with IE11 are caused by an evasive bug in the browser where the image load handler is sometimes called before the image is actually ready. Deferring the load handler with a small timeout seems to stabilize things.

Also found that Edge has a bug where it capitalizes several SVG attribute names (fill="red" becomes FILL="red"), which appears to mess up things across the board. I got downloading to work by using CanVG, but because of this bug the rendering is all wrong.

Can't promise that I can get all of these browsers to accept embedded images, but at least for normal charts we should have a working fix over the weekend, and graceful fallback to the export server.

@aaronogan

This comment has been minimized.

Show comment
Hide comment
@aaronogan

aaronogan Jun 24, 2016

Thanks for the update. We feel your pain on this one. And appreciate that you're looking into it.

Do you have a link to information about the bug about the load handler firing too soon? Not sure that we observed that behavior in IE 11 on Windows 10.

aaronogan commented Jun 24, 2016

Thanks for the update. We feel your pain on this one. And appreciate that you're looking into it.

Do you have a link to information about the bug about the load handler firing too soon? Not sure that we observed that behavior in IE 11 on Windows 10.

@oysteinmoseng

This comment has been minimized.

Show comment
Hide comment
@oysteinmoseng

oysteinmoseng Jun 27, 2016

Collaborator

@aaronogan: It seems to be an intermittent bug, and mostly related to SVG drawing. Some related info here and here.

Collaborator

oysteinmoseng commented Jun 27, 2016

@aaronogan: It seems to be an intermittent bug, and mostly related to SVG drawing. Some related info here and here.

@oysteinmoseng

This comment has been minimized.

Show comment
Hide comment
@oysteinmoseng

oysteinmoseng Jun 27, 2016

Collaborator

IE11 now works for charts without embedded images. Same with Edge, assuming newest version of CanVG is loaded (just load before calling the offline-exporting functions, and the script will use the preloaded canvg).

IE10, IE11 and Edge all fail for embedded images, producing a blank image result. Will look into this further. If tricky, we might resort to just falling back to the export server for these cases.

Note that export to SVG works in all cases.

Collaborator

oysteinmoseng commented Jun 27, 2016

IE11 now works for charts without embedded images. Same with Edge, assuming newest version of CanVG is loaded (just load before calling the offline-exporting functions, and the script will use the preloaded canvg).

IE10, IE11 and Edge all fail for embedded images, producing a blank image result. Will look into this further. If tricky, we might resort to just falling back to the export server for these cases.

Note that export to SVG works in all cases.

@oysteinmoseng

This comment has been minimized.

Show comment
Hide comment
@oysteinmoseng

oysteinmoseng Jun 28, 2016

Collaborator

Could not get IE/Edge to work with embedded images and PNG/JPEG, so for now we will have to resort to falling back to the export server. At least now we are throwing an exception properly, and charts without embedded images should be working.

Collaborator

oysteinmoseng commented Jun 28, 2016

Could not get IE/Edge to work with embedded images and PNG/JPEG, so for now we will have to resort to falling back to the export server. At least now we are throwing an exception properly, and charts without embedded images should be working.

@jon-a-nygaard

This comment has been minimized.

Show comment
Hide comment
@jon-a-nygaard

jon-a-nygaard Jul 18, 2016

Collaborator

@oysteinmoseng Do you have a link to the commit which fixes this? 😄

Collaborator

jon-a-nygaard commented Jul 18, 2016

@oysteinmoseng Do you have a link to the commit which fixes this? 😄

@oysteinmoseng

This comment has been minimized.

Show comment
Hide comment
@oysteinmoseng

oysteinmoseng Jul 18, 2016

Collaborator

@jon-a-nygaard The three commits above, or mainly commit 81df230.

Collaborator

oysteinmoseng commented Jul 18, 2016

@jon-a-nygaard The three commits above, or mainly commit 81df230.

@jon-a-nygaard

This comment has been minimized.

Show comment
Hide comment
@jon-a-nygaard

jon-a-nygaard Jul 18, 2016

Collaborator

@oysteinmoseng Sorry, somehow I did not notice them.

Collaborator

jon-a-nygaard commented Jul 18, 2016

@oysteinmoseng Sorry, somehow I did not notice them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment