css - 使用::before 背景图像时移动设备(chrome)上的图像边框问题

Question

我们网站上有多个地方使用 .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 的移动设备上，当被标记的 block 具有相同的颜色时会出现问题。似乎有 1 个或几个像素被错误地插值，导致显示底层元素的边缘。

我尝试过的事情:+ 使用 png、jpg 而不是 .svg 来查看问题是否与 .svg 的光栅化有关(问题仍然存在，没有区别)+ 稍微向上移动图像(保留线条)+ 让它稍微大一点(保留线)

引用下图。

issue example 1 issue example 2

非常感谢任何建议!

Answer 1

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

我在此处发布此问题之前尝试过此操作，但没有用。这与伪元素的父级使用 overflow-x: hidden 相关，因此 overflow-y 也自动隐藏了(我正在为任何有类似情况的人添加这个问题)。

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