Charts that look as-expected on 1.0.2 are wrong on 1.1.0

[bgribble]

This is a crappy bug report right now, sorry, I'll update it. I have a bar chart that looks like this with 1.0.2:

After an upgrade to chart.js 1.1.0 (thanks semver) it looks like this:

This is on current Chrome and Firefox desktop browsers. I haven't really looked into mobile yet.

[etimberg]

Obviously, a pretty concerning issue. It looks like the canvas width has changed. Does your canvas have padding applied to it?

[bgribble]

Here's the bit of HTML for the chart:

  <div class="audit-chart-wrapper">
    <div class="audit-chart audit-chart__time-to-employment">
      <canvas id="timeToGraduate"></canvas>
      <div class="audit-chart-legend"></div>
    </div>
  </div>

Here are the options passed to the chart constructor:

  {
    scaleShowGridLines: false,
    barShowStroke: false,
    barStrokeWidth: 60,
    barValueSpacing: 15,
    animation: false,
    scaleFontFamily: "Proxima Nova",
    scaleFontColor: gray50,
    scaleLabel: "<%= value + '%' %>",
    tooltipCornerRadius: 3,
    tooltipFillColor: "#EEEEEF",
    tooltipFontColor: gray50,
    tooltipFontFamily: "Proxima Nova",
    tooltipFontSize: 12,
    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value + '%' %>"
  }

And the business end of the Javascript:

  var ctx = canvas.get(0).getContext('2d');
  var barChart = new Chart(ctx).Bar(chart.data, options);

And the relevant CSS (well, Less):

.audit-chart {
  display: inline-block;
  vertical-align: top;

  &.audit-chart__time-to-employment {
    canvas {
      width: 300px;
      height: 270px;
      @media @nonmobile {
        width: 540px;
        height: 270px;
      }
    }
  }
}

Finally, comparative screengrabs from Chrome developer tools in case anything in there rings a bell. This is 1.0.2:

This is 1.1.0:

For now, we have pinned our production version to 1.0.2 so there's no panic for me.. I'm happy to help debug if it would be useful.

[TAGraves]

I had a similar issue with charts in 1.1.0 displaying incorrectly. Pretty sure the issue is from:

        var width = this.width = computeDimension(context.canvas,'Width') || context.canvas.width;
        var height = this.height = computeDimension(context.canvas,'Height') || context.canvas.height;

        width = this.width = context.canvas.width;
        height = this.height = context.canvas.height;

My guess is that in e94bd46#diff-ad32bb1bf83c0228c1601b3e063a3d08 the latter two lines were supposed to be removed as well but were not.

[etimberg]

Fixed in 1.1.1 release