同色SVG/PNG背景元素在小屏浏览器出现间隙问题求助

现象说明 #

网站布局为background-color属性的div与background-image属性的div交替排列，在笔记本Chrome中显示正常，但小屏设备上，仅当相邻div颜色相同时，SVG/PNG背景的div周围会出现奇怪间隙；颜色不同时无此问题。

测试案例 #

• 正常显示：wave2为不同颜色
• 异常显示：wave2为相同颜色

测试代码 #

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./teststyle.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="wave" id="wave-1">wave1</div>
    <div class="space">space</div>
    <div class="wave" id="wave-2">wave2</div>
    <div class="space">space</div>
    <div class="wave" id="wave-3">wave3</div>
  </body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0px;
}

body {
    margin: 0px;
    padding: 0px;
}

html,
body {
    height: 100%;
}

.wave {
    width: 100%;
    aspect-ratio: 900/50;
}

.space {
    background-color: grey;
    width: 100%;
    height: 10%;
}

#wave-1 {
    background-image: url(./imgs/wave-filled.svg);
}

#wave-2 {
    background-image: url(./imgs/wave-2.svg);
}

#wave-3 {
    background-image: url(./imgs/wave-3.svg);
}

异常SVG代码

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 50">
  <defs>
    <style>
      .cls-1 {
        fill: gray;
      }
    </style>
  </defs>
  <rect class="cls-1" width="952" height="131"/>
</svg>

已尝试的无效操作 #

• 更换不同来源SVG（GetWaves生成、Illustrator制作）
• 改用PNG背景图
• 为.wave类添加stroke: currentColor、fill: currentColor、display: inline-block、stroke-width: 0等样式

解决方案 #

该问题源于浏览器亚像素渲染误差：响应式缩放时元素尺寸产生非整数像素值，同色相邻元素的边缘因渲染精度问题出现细微间隙（反锯齿/颜色混合的视觉效果），以下是针对性修复方案：

1. 优化背景图渲染范围 #

给.wave类添加样式，让背景图轻微超出元素范围，覆盖可能出现的间隙：

.wave {
  /* 原有样式保留 */
  background-size: 100% calc(100% + 2px);
  background-position: center bottom;
  overflow: hidden;
}

2. 修正SVG尺寸匹配 #

异常SVG中rect尺寸（952x131）远大于viewBox（900x50），缩放时易产生偏差，修改SVG的rect与viewBox尺寸一致：

<rect class="cls-1" width="900" height="50"/>

3. 用负margin抵消间隙 #

给.wave添加负margin，覆盖可能出现的1px间隙，不影响整体布局：

.wave {
  /* 原有样式保留 */
  position: relative;
  margin: -1px 0;
}

4. 触发GPU加速统一渲染上下文 #

给父容器（如body）添加样式，强制浏览器使用GPU渲染，减少亚像素误差：

body {
  transform: translate3d(0, 0, 0);
}

内容的提问来源于stack exchange，提问作者Leo187_