One pixel wide artefact using Bootstrap grid with backgrounds

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>