Update 2015-11-25
A fix for this is finally in the pipeline - see https://codereview.chromium.org/1457783005.
tl;dr;
It is a bug feature in chrome.
Details
I have simplified my test cases massively at http://codepen.io/elliz/pen/fCsay and it still appears to be an issue in Chrome - and I have found a bug report (below).
<div class="wrapper">
<div>
Try resizing this page, the border between two colours should be smooth in most browsers, but will jump around in Chrome.
</div>
</div>
css
.wrapper {
background: linear-gradient(to right, #c93 66%, #2989d8 66%);
}
.wrapper div {
width:66%;
border-right: 1px dotted white;
}
May have to go back to using Faux Columns or other old-school designs ... or if your user-base only uses the latest browsers try out the new shiny and use flexbox ;)
Edit
I found a bug at - http://code.google.com/p/chromium/issues/detail?id=233879 and https://code.google.com/p/chromium/issues/detail?id=281489
skia discretizes the colors into 256 levels for (lots of) speed. hard-edged
gradients like this (where there are two colors at the same color-stop)
definitely show up this limitation. We can look at ways to increase
precision, but there will be a real performance cost, so we have to decide
how important this particular behavior is in practice.