One pixel wide artefact using Bootstrap grid with backgrounds - css

Question

I'm not going to try to explain this in words, just have a look at this fiddle:
https://jsfiddle.net/fhf8rwno/4/
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="myBox" style="height:100px;background-color:#000;">
<div class="row no-gutter">
<div class="col-xs-7">
blbalbalabla
</div>
<div class="col-xs-5" style="height:100px;background-color:red;">
wowowowo
</div>
</div>
</div>
</div>
</div>
</div>
In either Chrome or Firefox (possibly other browsers too), watch the red column as you resize the browser width. You should notice that on every other change in browser side a one-pixel-wide gap appears at the right edge of the parent container, allowing the parent background to come through.
If I instead use col-xs-6 instead of col-xs-7 and col-xs-5, the issue disappears. So it seems the browser's pixel math may cause this due to the odd/even mix of column ratios.
This may not seem like much, but the site I'm working on uses this pattern a lot and half the users are seeing some very noticeable and unsightly dark lines.
Any thoughts or suggested hacks?

Answer 1

Edit: here's a hacky way of achieving this. http://jsfiddle.net/fhf8rwno/8/
CSS
.row.no-gutter {
margin-left: 0;
margin-right: 0
}
.row.no-gutter [class*='col-'],
.row.no-gutter [class*='col-'] {
padding-right: 0;
padding-left: 0;
}
HTML
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="myBox" style="height:100px;background-color:#000;">
<div class="row no-gutter">
<div class="col-xs-7">
blbalbalabla
</div>
<div class="col-xs-5" style="height:100px;background-color:red; position: relative; right: -1px;">
wowowowo
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

A colleague and I have come to a semi-solution, but I'm not going to accept this answer just yet in case someone comes up with something less hack-y.
Shifting the last column's margins by one seems to help the issue:
.row.no-gutter [class*='col-']:last-child {
margin-right:-1px;
margin-left:1px;
}
https://jsfiddle.net/fhf8rwno/6/