Webkit linear gradient stops render incorrectly

Question

I have come across a weird problem in webkit browsers (Chrome, Opera).

Test case: http://sample.easwee.net/gradient-bug/ (check in Chrome or latest Opera)

I

Answer 1

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.