CSS-Problem mit :: vor auf Telefone

Ich traf kleines Problem bei der Verwendung :: vor ... Ich bin ein kleines Dreieck vor meinem Div-Inhalt hinzufügen, um es mehr Phantasie, ich habe animierten Hintergrund, und ich fand, dass bei niedrigen Auflösungen (speziell auf Handys) gibt es einige seltsame Zeilen, die ich nicht loswerden kann.CSS-Problem mit :: vor auf Telefone

hier ist mein 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; 
}

und hier ist das, was ich sehe, wenn I`m es als Telefon Inspektion:
https://codepen.io/anon/pen/bWmWEL

:
inspect with Galaxy S5 360x640

hier ein codepen ist Wenn mir jemand sagen kann, was ich damit anfangen kann, wird es sehr hilfreich sein.
Danke!

Quelle

2017-05-18 kacperpll

Ich würde neu zu erstellen, in jsfiddle oder codepen oder als Stapel Snippet empfehlen, so dass potenzielle Beantworter das Problem leicht sehen kann. – Toby

Hinzufügen von Codepen in Post, nicht sicher, ob alles gut ist (ich sehe, es gibt kleine Unterschiede im Bootstrap), aber ich bin sicher, dass Sie dieses Problem sehen können, wenn Sie diesen Codepen – kacperpll

Es geht um das Rendern. Das Dreieck, das du in ::before erschaffst, befindet sich in deinem Abschnitt nur auf den gleichen Pixeln von oben, in einigen Auflösungen kannst du einen Unterschied von einem Pixel sehen, deshalb gibt es den Rand. Lösung hierfür ist einfach Rand oben hinzuzufügen: -1px;

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

Quelle

2017-05-19 11:25:47 addictive

Das funktioniert ziemlich gut, Danke! – kacperpll

CSS-Problem mit :: vor auf Telefone

Antwort

Verwandte Themen