绝对定位SVG元素底部出现细小渲染间隙的原因是什么

偶发的底部缝隙由两个核心原因导致：

1. 绝对定位的.sections-divider未设置显式高度，当视口/父容器尺寸为非整数值时（打开开发者工具调整窗口大小时极易触发），浏览器会对元素高度做亚像素取整，产生小于1px的计算偏差
2. 浏览器默认抗锯齿渲染会在元素边缘生成半透明过渡像素，透出下方橙色容器的底色
   之前设置bottom: -1px导致三角形尖被裁切，是因为偏移量过大，三角形顶点超出渲染边界，无论是父容器overflow: hidden裁剪还是SVG视口边界限制，都会让尖部缺失变成梯形。

HTML #

<div class="sections-divider bottom">   
   <svg class="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 10" preserveAspectRatio="none">
      <path fill="rgba(255, 255, 255, 1)" d="M360 0L350 10 340 0 0 0 0 10 700 10 700 0"></path>
   </svg>
</div>

CSS #

/* Sections Separator */
.sections-divider {
    position: absolute;
    left: 0;
    width: 100%;
    display: flex;
}
.sections-divider svg { width: 100%; height: 100%}
.sections-divider.bottom {bottom: 0; top: auto}

任选以下一种方案即可，不会出现三角形裁切问题：

• 方案1：显式指定高度+微小垂直缩放（改动最小）
  补充以下CSS规则：

  .sections-divider {
      height: 10px; /* 和SVG viewBox高度对齐，从根源减少高度计算误差 */
  }
  .sections-divider.bottom svg {
      transform: scaleY(1.05);
      transform-origin: bottom center;
  }
  

  垂直方向5%的缩放幅度肉眼完全无法感知，足够覆盖0.8px的缝隙；因为缩放锚点设置在底部中心，三角形尖部会完全贴齐容器底部，不会出现裁切。
• 方案2：SVG路径增加冗余填充（稳定性最高）
  修改SVG代码，在底部多预留1px的白色填充区域，即使出现偏移也不会漏出底色：

  <svg class="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 11" preserveAspectRatio="none">
    <path fill="rgba(255, 255, 255, 1)" d="M360 0L350 11 340 0 0 0 0 11 700 11 700 0"></path>
  </svg>
  

  同时给.sections-divider设置height: 10px即可，三角形尖部的显示位置和原效果完全一致，无任何变形。
• 方案3：强制GPU渲染层减少计算误差
  给橙色父容器添加以下规则：

  .orange-container {
      transform: translateZ(0);
      backface-visibility: hidden;
  }
  

  该方案会让元素单独进入GPU渲染层，降低亚像素取整的误差概率，稳定性弱于前两个方案，适合不想改动现有尺寸逻辑的场景。

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