css - 如何使波浪下划线延伸覆盖Chrome中的所有字符

Question

我尝试使用波浪下划线来突出显示完整的句子，但它似乎会遗漏某些字符（短字符和下划线末尾的字符）。这是预期的行为还是 Google Chrome 中的错误（在 Firefox 中一切正常）？

如果这是预期的行为（我知道非常短的字符的波浪下划线可能看起来不太吸引人），我如何解决这个问题以在整个文本范围内获得波浪下划线（最好不求助于背景图像替代品）？

.dotted,
.wavy {
  text-decoration-skip-ink: none;
  text-decoration-line: underline;
  text-decoration-color: blue;
}

.dotted {
  text-decoration-style: dotted;
}

.wavy {
  text-decoration-style: wavy;
}

div {
  font-family: "Times New Roman"
}

div {
  border: 4px solid black;
  margin: 5px;
  padding: 0px 5px;
}

.ok {
  border-color: green
}

.problem {
  border-color: red
}

.using-sans {
  font-family: sans
}

<div class=ok>
  <p>
    The dotted underline correctly underlines all characters:
    <span class=dotted>works ok</span>
  </p>
  <p>
    As well as single characters:
    <span class=dotted>d</span>
  </p>
</div>


<div class="problem">
  <p>
    But the vawy underline misses the last character:
    <span class=wavy>does not work ok</span>
  </p>
  <p>
    And does not work for some single characters:
    <span class=wavy>d</span>
  </p>
</div>


<div class="ok">
  <p>
    Suprisingly, it does work for others:
    <span class=wavy>W</span>
  </p>
</div>

<div class="problem">
  <p>
    Which seem to depend on the length of the glyph, as the lowercase version of "w" does not work:
    <span class=wavy>w</span>
  </p>
</div>


<div class="ok using-sans">
  <p>
    Unless we change the font:
    <span class=wavy>w</span>
  </p>
</div>


<div class="problem using-sans">
  <p>
    But again, it will only work for some characters:
    <span class=wavy>p</span>
  </p>
</div>

编辑：我发现似乎是一个相关的错误报告，它解释了这一点

渲染波浪下划线的 Chromium 实现是“向下舍入到最接近的波长”

标签： cssgoogle-chrome