Граница * под * элемент с фоновым заполнением все еще немного заметен ⇐ Html

[Anonymous]

setup
У меня есть следующие HTML и CSS (самое важное, что нужно заметить,-это стиль для #selected-tab ):

Код: Выделить всё

[url=/]Home[/url]
[url=/blog]Blog[/url]
[url=/about]About[/url]
[url=/contact]Contact[/url]



< /code>
body {
max-width: 650px;
margin: 0 auto;
}

a {
text-decoration: none;
color: black;
}

header {
padding-top: 100px;
border-bottom: 1px solid black;
}

nav {
padding-left: 15px;
}

nav > span {
position: relative;
padding: 10px min(5%, 40px) 0;
}

#selected-tab::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid black;
border-bottom: none;
border-radius: 5px 5px 0 0;
transform: perspective(5px) rotateX(1deg);
transform-origin: bottom;
}

#selected-tab::after {
content: '';
position: absolute;
top: 95%;
right: 0;
bottom: -4px;
left: 0;
transform: perspective(5px) rotateX(1.4deg);
transform-origin: bottom;
background: white;
}

This produces the following output:


The Problem
While the above looks fine on my desktop computer, it looks ever so slightly wrong on my android phone in both firefox and chrome (the slanted line above not touching the bottom line is not the issue):


Notice the seam going under #selected-tab :: ather элемент? Скорее всего, потому что проблема исчезает, когда я смотрю на изображение такое же на моем компьютере, проблема все еще существует, если я посмотрю на это изображение на своем телефоне, что!? Прежде чем вы предположили, что это вызвано преобразованием, я попытался удалить его, эта небольшая линия под до сих пор видна над фоновым заполнением #selected-tab :: после .

Подробнее здесь: https://stackoverflow.com/questions/796 ... ly-visible