Почему на планшетах и мобильниках появляется промежуток?

Когда рисую треугольники с помощью CSS, используя псевдоэлементы :after и :before, между треугольником и блоком иногда появляется промежуток.

Это происходит только на планшетниках и мобильниках. Почему такое происходит?

.box {
    position: relative;
    width: 60px;
    height: 30px;
    background: #40a33d
}

.box:after {
    position: absolute;
    content: "";
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 30px 0 30px;
    border-color: #40a33d transparent transparent transparent;
}

Вероятно ли, что проблема в рендеринге (движке)?