在背景图像之前使用::时，移动设备（chrome）上的图像边框问题

Posted 2021-05-06

我们网站上有多个地方使用.svg和背景图像规则来创建形状。

例如：

    &:before {
    bottom: auto;
    height: 4rem;
    content:'';
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url('img/layout/press-before.svg');
    background-size: 100%;
    background-repeat: no-repeat;

    @media screen and (max-width: $viewport-xs) {
        height: 2rem;
    }

    @media screen and (max-width: $viewport-sm) {
        top: -.1rem;
    }
}

这适用于所有分辨率的桌面。但是在使用chrome的几个移动设备上，当弹出的块具有相同的颜色时会出现问题。似乎有一个或几个像素被错误地插入，这导致底层元素的边缘显示。

我尝试过的事情：+使用png，jpg而不是.svg来查看问题是否与.svg的光栅化有关（问题持续存在而没有差异）+向上移动图像（线条保持不变）+使其略大（线条）保持）

供参考，请参阅以下图像。

issue example 1 issue example 2

任何建议都非常感谢！

答案

我的解决方案是通过将top: -1px添加到伪元素来将图像向上移动一点。

在我在这里发布这个问题之前我尝试了这个并且它没有用。这与伪元素的父元素使用overflow-x: hidden这一事实有关，因此溢出-y也自动隐藏（我为任何有类似问题的人添加此元素）。

当然这意味着我需要调整svg的形状，因为它已经向上移动1px。