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问题在手机上

回答

相关问题