CSS проблема с::before на телефонах

Question

Я столкнулся с небольшой проблемой при использовании:: before... Я добавляю маленький треугольник перед моим div-контентом, чтобы сделать его более необычным, у меня есть анимированный фон, и я обнаружил, что на низких разрешениях (особенно на телефонах) есть некоторые странные строки, которые я не могу избавиться.

вот мой код

#thirdScreen::before{
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 50px 90vw 0 10vw;
  border-color: transparent #E3E3E3 ;
  background-attachment: fixed;
  background-image: url(https://media.giphy.com/media/kW6O6ozGQnqzm/giphy.gif);
  background-size: contain;
}

и вот что я вижу, когда проверяю это как телефон:
проверить с Galaxy S5 360x640

Вот кодовая ручка:
https://codepen.io/anon/pen/bWmWEL

Если кто-то может сказать мне, что я могу сделать с этим, будет очень полезно.
Спасибо!

Answer 1

Это о рендеринге. Треугольник, который вы создаете в ::before перемещает ваш раздел только на те же пиксели сверху, в некоторых разрешениях вы можете увидеть разницу в один пиксель, поэтому есть граница. Для этого нужно просто добавить margin-top: -1px;

#secondScreen::before {
    margin-top: -1px;
}