如何解决SVG foreignObject中使用white-space: pre-wrap时出现的虚假滚动条问题

我之前也碰到过这个烦人的小bug！本质上是子像素渲染误差在搞鬼：当你用了小数的line-height（比如你代码里的1.2）加上white-space: pre-wrap时，浏览器计算内容高度会出现极其微小的溢出——视觉上完全看不到，但足够触发滚动条的显示。下面给你几个实测有效的解决办法：

方法1：用overflow-clip-margin裁剪微小溢出（最优雅） #

现代浏览器支持overflow-clip-margin属性，它可以让容器裁剪掉指定范围内的溢出内容，刚好能解决这种子像素级的虚假溢出问题。只需要给你的滚动容器加一行代码：

.svg-comment-text-scroll {
  /* 原有样式不变 */
  overflow-clip-margin: 1px; /* 裁剪掉1px内的溢出 */
}

这个方法不用改动行高或者布局，对现有代码侵入最小，而且不会影响真正需要滚动的长内容。

方法2：把line-height换成整数像素值 #

你的font-size是12px，line-height:1.2计算后是14.4px——这个小数就是子像素问题的根源。直接换成整数像素的行高，让浏览器计算高度时没有小数误差：

.svg-comment-text {
  /* 替换原来的line-height */
  line-height: 14px; /* 或者15px，根据视觉需求调整 */
}

这个方法最稳妥，完全避免了子像素计算的问题，唯一需要注意的是要确保行高的视觉效果符合你的需求。

方法3：调整布局结构，避免table布局的计算误差 #

你用了display: table和display: table-cell的嵌套结构，这种布局在和SVG foreignObject结合时，有时候会带来额外的高度计算偏差。可以换成flex布局来简化结构：

.svg-comment-text-outer {
  /* 替换原来的display:table */
  display: flex;
  pointer-events: none;
  width: 100%;
  height: 100%;
  outline: none;
}

.svg-comment-text {
  /* 去掉display:table-cell */
  display: block;
  /* 原有样式不变 */
}

flex布局的高度计算更直接，能减少和SVG foreignObject之间的兼容性问题。

下面是修改后的完整代码示例，用方法1解决了虚假滚动条的问题：

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 20px; background-color: #f9f9f9; }
    svg { border: 1px solid #d6d6d6; background-color: #ffffff; }
    .container { margin-bottom: 20px; }
    .container h4 { margin: 0 0 5px 0; font-weight: normal; color: #555; }

    :root {
      --cds-layer-active-02: #c6c6c6;
      --cds-layer-02: #ffffff;
      --cds-text-primary: #161616;
      --cds-layer-01: #f4f4f4;
    }

    .svg-comment-text-scroll {
      pointer-events: unset;
      overflow-x: hidden;
      overflow-y: auto;
      border-color: var(--cds-layer-active-02);
      border-width: 1px;
      border-style: solid;
      height: 100%;
      width: 100%;
      scrollbar-color: var(--cds-layer-active-02) var(--cds-layer-02);
      box-sizing: border-box;
      overflow-clip-margin: 1px; /* 新增这行 */
    }

    .svg-comment-text-outer {
      display: table;
      pointer-events: none;
      overflow: hidden;
      width: 100%;
      height: 100%;
      outline: none;
    }

    .svg-comment-text {
      color: var(--cds-text-primary);
      background-color: var(--cds-layer-01);
      font-size: 12px;
      font-weight: 500;
      border-style: solid;
      border-color: transparent;
      width: 100%;
      height: 100%;
      pointer-events: auto;
      overflow: hidden;
      line-height: 1.2;
      white-space: pre-wrap;
      word-wrap: normal;
      word-break: break-word;
      padding: 0.5rem; /* 8px */
      display: table-cell;
      box-sizing: border-box;
    }

    .svg-comment-text.markdown p { margin: 0; }
  </style>
</head>
<body>
  <div>
    <div class="container">
      <h4>Fixed Case: No Phantom Scrollbar</h4>
      <svg width="220" height="75">
        <foreignObject class="svg-foreign-object-comment-text" x="10" y="10" width="200" height="55">
          <div class="svg-comment-text-scroll" tabindex="-1">
            <div class="svg-comment-text-outer">
              <div class="svg-comment-text markdown">
                <p>Short text.</p>
              </div>
            </div>
          </div>
        </foreignObject>
      </svg>
    </div>
    <div class="container">
      <h4>Correct Behavior: Real Scrollbar</h4>
      <svg width="220" height="75">
        <foreignObject class="svg-foreign-object-comment-text" x="10" y="10" width="200" height="55">
          <div class="svg-comment-text-scroll" tabindex="-1">
            <div class="svg-comment-text-outer">
              <div class="svg-comment-text markdown">
                <p>This is a much longer line of text that is designed to genuinely overflow the container and correctly show a scrollbar.</p>
              </div>
            </div>
          </div>
        </foreignObject>
      </svg>
    </div>
  </div>
</body>
</html>

现在短文本的虚假滚动条会消失，长文本的滚动条依然正常工作，完美解决问题！

内容来源于stack exchange