Артефакты треугольника CSS

Используя подсказки, найденные здесь , я успешно достиг «наклонного» div, разместив треугольник над цветным прямоугольником, однако я испытываю некоторые странные артефакты (см. Ниже).

Обратите внимание на тонкую линию над цветной секцией - это похоже на то, что треугольник расположен слишком низко. Я часто использую 10vhили 10%, что может привести к ошибкам округления с нерасширяемыми высотами экрана / div, но это предположение.

Что вызывает эту проблему, и что я могу ее исправить?

---

Треугольник CSS

& {
    width: 0;
    height: 0;
    border-style: none;
}

#container {
    width: 100%;
    position: absolute;
    z-index: 1;
}

#top-left {
    border-right: 100vw solid transparent;
}

#top-right {
    border-left: 100vw solid transparent;
}

#bottom-left {
    border-right: 100vw solid transparent;
}

#bottom-right {
    border-left: 100vw solid transparent;
}

Когда я создаю треугольник, я указываю либо border-topили border-bottom, либо соответствующий отрицательный маркер. В приведенном выше случае высота составляла 50 пикселей:

<div id = {{attr.direction}} style = "border-top: {{attr.height}} solid {{attr.color}}"></div>

<div id = {{attr.direction}} style = "border-bottom: {{attr.height}} solid {{attr.color}}; margin-top: -{{attr.height}}"></div>

JSFiddle

Это можно увидеть в этом JSFiddle , а не путем изменения размера панели просмотра, но выбрав отзывчивый вид в настройках разработчика и изменив размер экрана. Чтобы сделать это в хроме, щелкните правой кнопкой мыши> Осмотреть> Отзывчивый (из раскрывающегося списка). Однако это не просто сбой в настройках разработчика, как это наблюдается на реальных мобильных устройствах. Обратите внимание на тонкий красный контур на изображении ниже.