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

【问题标题】：Image border issue on mobile devices (chrome) when using ::before background image使用 ::before 背景图像时移动设备 (chrome) 上的图像边框问题
【发布时间】：2018-02-28 16:47:27
【问题描述】：

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

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

有关参考，请参阅以下图片。

issue example 1 issue example 2

非常感谢任何建议！

【问题讨论】：

标签： css google-chrome mobile background-image styling

【解决方案1】：

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

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

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

【讨论】：