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 渲染波浪下划线的实现是“向下舍入到最近的波长”