Chrome donut chart animation bug; transitions behave unexpectedly

In chrome, the code below has started causing an odd transition behavior in my pie chart when the data is updated. I’ve attached an image to illustrate the issue. This only started happening recently, and other browsers (Safari, IE10+) don’t exhibit the behavior; the transitions behave just like they do in the example: https://bl.ocks.org/mbostock/1346395

The code below was generated from coffeescript. I can provide the original CS if requested

({
  renderChart: function() {
    var color, height, radius, svg, width;
    width = this.ui.chartWrap.width();
    height = this.ui.chartWrap.height();
    radius = Math.min(width, height) / 2;
    color = d3.scale.category20();
    if (_.every(this.data, function(type) {
      return !type.count;
    })) {
      return false;
    }
    this.pie = d3.layout.pie().value(function(d) {
      return d.count;
    }).sort(null);
    this.arc = d3.svg.arc().innerRadius(.5 * radius).outerRadius(radius);
    svg = d3.select('#dups-chart').append('svg').attr('width', width).attr('height', height).append('g').attr('transform', "translate(" + (width / 2) + "," + (height / 2) + ")");
    this.path = svg.selectAll('path').data(this.pie(this.data)).enter().append('path').attr('d', this.arc).attr('class', (function(_this) {
      return function(d, i) {
        return _this.data[i]["class"];
      };
    })(this)).attr('data-type', (function(_this) {
      return function(d, i) {
        return _this.data[i].value;
      };
    })(this)).each(function(d) {
      this._current = d;
    });
    return this.updateChart();
  },
  updateChart: function() {
    var arcTween, hasData, view;
    view = this;
    arcTween = function(a) {
      var i;
      i = d3.interpolate(this._current, a);
      this._current = i(0);
      return function(t) {
        return view.arc(i(t));
      };
    };
    hasData = _.any(this.data, function(d) {
      return d.count > 0;
    });
    if (hasData) {
      this.ui.chartWrap.find('svg').show();
      this.pie.value(function(d) {
        return d.count;
      });
      this.path = this.path.data(this.pie(this.data));
      return this.path.transition().duration(750).attrTween("d", arcTween);
    } else {
      return this.ui.chartWrap.find('svg').hide();
    }
  }
});

[kwhitaker]

Well, I figured out where the bug was coming from. Turns out it had nothing to do with d3 at all; I had a transition in the CSS for my chart paths. Somehow there was a weird intersection between the d3 transition and the css transition in Chrome only.

[ndobb]

Wow @kwhitaker your last comment saved me after days of frantically grasping at straws for why my circle objects’ transitions were all delayed in Chrome. In my case, I had a css transition: all 0.5s that seemed to be interfering with the d3 transition, causing an odd delay, and only in Chrome.