CSSの問題:: ::前に電話で

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

、ここではI`mが電話としてそれを検査するときに私が見たものである：ここでは
inspect with Galaxy S5 360x640

はcodepenです：
https://codepen.io/anon/pen/bWmWEL

誰かが私に何ができるか教えてもらえれば、それはとても役に立つでしょう。
ありがとうございます！

Answer 1

レンダリングについてです。 ::beforeで作成したトライアングルは、上から同じピクセルだけでセクションをホバリングしていますが、一部の解像度では、1ピクセルの違いが表示されることがあります。これを解決するには、単純にmargin-top：-1pxを追加します。

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