使用 ::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 的移动设备上，当被标记的块具有相同的颜色时会出现问题。似乎有 1 个或几个像素插值不正确，导致显示底层元素的边缘。

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

参考以下图片。

issue example 1 issue example 2

非常感谢任何建议！

Answer 1

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

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

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

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

Image border issue on mobile devices (chrome) when using ::before background image

css

mobile

google-chrome

background-image

styling