Why does a gap appear on tablets and mobile phones?

Question

css

When I draw triangles with CSS using the :after and :before pseudo-elements, there is sometimes a gap between the triangle and the box.
This only happens on tablets and mobile phones. Why is this happening?

.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;
}

Is it likely that the problem is in the rendering (engine)?

Answer 1

Why can't I download from this link?
Code / site give?