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

A firefox fix in Chart.Core.Js actually breaks the Chart.js library on Firefox and Internet Explorer #1198

Closed
sander1095 opened this Issue Jun 12, 2015 · 2 comments

Comments

Projects
None yet
3 participants
@sander1095

sander1095 commented Jun 12, 2015

Hello everyone.

I had some trouble with Internet Explorer and Firefox and after some digging I found out that on these 2 browsers the style attribute of the chart canvas is not right. The Height/Width values will be 0 and this means that I can not see any charts.

I am using Knockback.js, this might be a part of the issue. I also calculate the height and width of the canvas myself, which is also not required. This might also be a part of the issue.

Chrome:

<canvas data-bind="barChart" style="padding: 10px; width: 200px; height: 170px;" width="200" height="170"></canvas>

Firefox:

<canvas height="0" width="0" data-bind="barChart" style="padding: 10px; width: 0px; height: 0px;"></canvas>

Internet Explorer:

<canvas width="0" height="0" style="padding: 10px; width: 0px; height: 0px;" data-bind="barChart"></canvas>

As you can see, Internet Explorer and Firefox's Height and Width are 0. This is WRONG and causes the Canvas not to draw the chart!

In the Chart.Core.Js file, around line 43, it says the following:

// Firefox requires this to work correctly     
    context.canvas.width  = width;
    context.canvas.height = height;

If you disable these lines, the charts will work Perfectly on Internet Explorer and Firefox. I hope someone can look into this problem!

@mingchan

This comment has been minimized.

Show comment
Hide comment
@mingchan

mingchan Sep 26, 2015

I've the same issue with Firefox when the chart is wrapped inside Backbone.Marionette view but the same code works in Chrome meaning the chart is showing fine.
In addition, if just using simple HTML tags to run the example, it works fine under Firefox as well.

I’m suspecting that it has to do with what is returned by computeDimension()

Under Chrome, it returns an empty string and null for “Width” and “Height” respectively.

Under Firefox, it returns “auto” and empty string for “Width” and “Height” respectively.

mingchan commented Sep 26, 2015

I've the same issue with Firefox when the chart is wrapped inside Backbone.Marionette view but the same code works in Chrome meaning the chart is showing fine.
In addition, if just using simple HTML tags to run the example, it works fine under Firefox as well.

I’m suspecting that it has to do with what is returned by computeDimension()

Under Chrome, it returns an empty string and null for “Width” and “Height” respectively.

Under Firefox, it returns “auto” and empty string for “Width” and “Height” respectively.

ryoon added a commit to ryoon/Chart.js that referenced this issue Dec 12, 2015

Remove Firefox workaround
The workaround for older Firefox should be removed, because latest
supported Firefox 38.4.0/42.0 do not require it.
And it has side effect like #1198 or my problem on Kintone on cybozu.com.
@etimberg

This comment has been minimized.

Show comment
Hide comment
@etimberg

etimberg Dec 25, 2015

Member

Closing since #1771 merged

Member

etimberg commented Dec 25, 2015

Closing since #1771 merged

@etimberg etimberg closed this Dec 25, 2015

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