CSS問題在手機上

之前，我使用的時候::之前...我真的我格內容前添加小三角，使其更看中的，我有動畫背景，我發現，在低分辨率下遇到的小問題（特別在手機上）有一些奇怪的線條，我不能擺脫。CSS問題在手機上

這裏是我的代碼

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

這裏是我看到的時候我真的檢查它作爲一個電話：
inspect with Galaxy S5 360x640

這裏是一個codepen：
https://codepen.io/anon/pen/bWmWEL

如果有人能告訴我我能做些什麼，這將會非常有幫助。
謝謝！

來源

2017-05-18 kacperpll

我建議再創造的jsfiddle或codepen，或作爲堆棧段，這樣潛在的應答者可以很容易地看到這個問題。 – Toby

將在後codepen，不知道，如果一切都很好（我看到有小的差別在引導），但是我相信這此檢查codepen – kacperpll

這是關於渲染。在::before中創建的三角形將您的部分懸停在與頂部相同的像素上，在某些分辨率中，您可能會看到一個像素差異，即爲什麼存在邊框。解決方案是簡單地添加margin-top：-1px;

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

來源

2017-05-19 11:25:47 addictive

這工作得很好時，你可以看到這個問題，謝謝！ – kacperpll

CSS問題在手機上

回答

相關問題