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

[sander1095]

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]

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.

[etimberg]

Closing since #1771 merged