dc.js brush not aligned with cursor

Question

I have a number of dc bar charts that get added to a page. For some reason, when I brush a selection on the chart, the selected area starts a good bit to the left of the cursor.

For example in this case the cursor was around 12 on the x axis, but the brush selection started around 4.

In most cases the cursor starts before the x axis with no data selected.

This is pretty much the code used for the chart. I can't really see anything that would be causing this issue.

I'm working with version dc 2.0.0-beta.19, but I don't think it's an issue related to this version as it seems to be happening on the stable release too.

var width = 300;
var height = 100;
var ndx = crossfilter(data);
dim = ndx.dimension(function(d) {return +d[feature];});
grp = dim.group().reduceCount();

chart = dc.barChart("#chart-relative-var4252"); 

chart.width(width)
 .height(height)
 .dimension(dim)
 .group(grp)
 .x(d3.scale.linear().domain([0,21]))
 .elasticY(true)
 .gap(1)
 .brushOn(true);

Would anyone have suggestions on where to start looking to troubleshoot this?