CSS issue with ::before on phones

Question

I met small problem when using ::before... I`m adding small triangle before my div content to make it more fancy, i have animated background and i found that on low resolutions (specialy on phones) there are some weird lines that i cant get rid off.

here is my code

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

and here is what i see when I`m inspecting it as a phone:
inspect with Galaxy S5 360x640

Here is a codepen:
https://codepen.io/anon/pen/bWmWEL

If someone can tell me what can i do with it will be very helpfull.
Thanks!

Answer 1

It's about rendering. Triangle you creating in ::before is hovering your section just on same pixels from the top, in some resolutions you may be able to see one-pixel difference, that why there is the border. Solution for this is to add simply margin-top: -1px;

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