вертикальная линия между элементом div и его собственной границей в Chrome

Question

Я указал элемент div с нижней границей, используя тот же цвет, что и сам div, для создания вертикального асимметричного размещения фонового изображения. Однако между div и его границей появляется очень тонкая линия (элемент и его граница имеют цвет # 141414, широкая линия 1px - # 2c2c2c).

Инструменты разработчика Chrome говорят, что линия не существует, но все равно видна. Проблема не существует в Firefox или Internet Explorer и появляется только с некоторыми окнами ширины, не с другими, но с различной яркостью.

Появляется, только когда я использую отступ на фоне.

HTML

<div id="titleBlock">Title Text</div>

1010 * CSS *

#titleBlock {
    background: url("logo2.svg") center center no-repeat #141414 padding-box;
    width: 100%;
    height: 9.25vw;
    text-align: center;
    color: #DCDCDC;
    font-size: 3.3vw;
    padding-top: 20.75vw;
    font-weight: 300;
    border-bottom: #141414 solid 3vw;
}

Кто-нибудь еще испытывал это или знает решение без создания второго div для представления нижней границы?

Answer 1

Насколько важны для вас дополнительные 0,25% ширины вида?

Я заставил его исчезнуть в Chrome, подняв padding top: 20.75vw до padding-top: 21vw.