Dotted underlines don't render properly in Chrome

Question

Using Chrome 65, it looks like the text-decoration: underline dotted; yields an unelegant result :

Whereas on Firefox, i'm getting the expected outcome :

What's wrong with chrome ?

I expanded the snippet with a further test. It seems to only fail with certain font sizes and font faces. Specifically here with Trebuchet MS and 18px font-size.

span{
  text-decoration: underline dotted;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  padding: 1rem;
  background-color: black;
  color: white;
  display: inline-block;
  margin: 1rem;
}

<span style="font-size: 12px;">
  A 12px button of some sort
</span>

<span style="font-size: 14px;">
  A 14px button of some sort
</span>

<span style="font-size: 16px;">
  A 16px button of some sort
</span>

<span style="font-size: 18px; background-color: darkRed;">
  A 18px button of some sort
</span>

<span style="font-size: 20px;">
  A 20px button of some sort
</span>

Seems like it works for bigger fonts. https://jsfiddle.net/phiter/v76b4hht/ — Phiter, Apr 24 '18 at 17:07
You could replace the text-decoration with a border-bottom dotted — Rafael Umbelino, Apr 24 '18 at 17:08
I confirm it on Windows 10. If feels like yet another Chrome bug. — Álvaro González, Apr 24 '18 at 17:10
Good catch @Phiter. I made a fiddle with multiple sizes, it looks like it only bugs out between 16 and 20px. https://jsfiddle.net/povLxu11/ — Brachamul, Apr 24 '18 at 17:15

score 16 · Accepted Answer · answered Apr 24 '18 at 18:34

16

Use text-decoration-skip-ink: none (The default was changed to auto in https://crrev.com/514104.)

If you look closely, the gaps in the underline correspond to the loops at the bottom of the letters, which lie very close to the baseline of the font. It appears that the skip-ink algorithm is choosing to cut the underlines off here — but only for dotted and dashed, and only at certain font sizes.

https://crbug.com/808603 suggests that the underlying reason is that the dots and dashes are two pixels tall.

answered Apr 24 '18 at 18:34

Josh Lee

171,072
38
269
275

Good catch ! So it is indeed a bug. I'll leave it like this and hope Google fixes it eventually. – Brachamul Apr 25 '18 at 11:05
This fix does look better to me. As of Chrome 86, I am not sure what to suggest the correct functionality should be, perhaps `text-decoration-skip-ink: none` should be the default. – stackuser83 Nov 02 '20 at 15:48

Dotted underlines don't render properly in Chrome

1 Answers1