Puppeteer生成PDF时半透明拼接元素间出现多余线条问题求解

问题根因 #

这个问题本质是PDF渲染引擎对半透明矢量元素做亚像素抗锯齿计算时的浮点精度误差导致的，不属于代码逻辑错误，打印时确实不会显示，仅屏幕预览时会出现渲染异常。

可落地的解决方案 #

• 给相邻的拼接元素设置极小的负边距实现轻微重叠，比如半透明div统一设置margin-right: -0.5px，重叠部分不会影响视觉效果，刚好可以填补抗锯齿带来的缝隙，不需要调整原有布局逻辑。
• 放弃多元素拼接方案，改用单元素多重背景实现：给单个div设置3段独立的背景色块，分别定位到左、中、右区域，背景总宽度稍微超过100%（比如每块宽度设置为33.334%），从根源上消除拼接边界，同时不会出现线性渐变偏移的问题，示例代码：

.transparent-box {
  width: 100%;
  height: 100px;
  background: 
    linear-gradient(rgba(255,0,0,0.5), rgba(255,0,0,0.5)) left top / 33.334% 100% no-repeat,
    linear-gradient(rgba(0,255,0,0.5), rgba(0,255,0,0.5)) left 33.333% top / 33.334% 100% no-repeat,
    linear-gradient(rgba(0,0,255,0.5), rgba(0,0,255,0.5)) right top / 33.334% 100% no-repeat;
}

• 给透明元素的父容器添加transform: translateZ(0)属性，强制开启硬件渲染，降低软渲染的浮点计算误差。
• 调整Puppeteer导出参数：导出PDF时指定deviceScaleFactor: 2、preferCSSPageSize: true、scale: 1，避免缩放带来的像素对齐误差。
• 如果坚持用SVG实现，不要用多个<rect>拼接，改用单个<path>绘制所有色块，完全消除拼接边界。

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