Darko Darko - 3 months ago 6
CSS Question

Srange border on "cover" backgrounds inside elements with display table-cell css property - chrome

I'm seeing 1px border/gap between columns on some resolutions in chrome:

enter image description here

there's no gap in Firefox btw.

HTML:

<div class="row equalize">
<div class="col-sm-6 col-sm-push-6 wt-bg-two"></div><!--div with bg image -->
<div class="col-sm-6 col-sm-pull-6 c-dark-blue">
<div class="inner text-right">
<h3>Some Title</h3>
<p>some paragraph text</p>
</div>
</div>
</div>


CSS:

.row.equalize {
display: table;
width: 100%;
margin: 0;
}
.equalize [class*="col-"] {
float: none;
display: table-cell;
vertical-align: middle;
height: 400px;
}


UPDATE:
here's the fiddle

Just open it in Chrome/Win - resize the result frame until boxes are side by side - the best example of what I'm trying to show can be viewed in the 2nd row - on some frame widths 1px gap appears.

IMPORTANT:
answers including "flex" solution would not be accepted, thx

Answer

It looks like this is caused by an odd number of pixels that Bootstrap is trying to split 50/50 via col-sm-6 class. See What happens to the remaining 1px when a div with an odd width is split 50%/50%? for browser-specific details.