UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.119 Safari/537.36

Steps to reproduce the problem:
Example codepen: https://codepen.io/anon/pen/GQgBWm

Steps to reproduce:

1. Create a page with a link.

2. Add the following CSS to that link (notably ` text-decoration: underline;` and `text-decoration-style: dotted;`):

a {
  text-decoration: underline;
  text-decoration-style: dotted;
  font-size: 18px;
  font-family: 'Times New Roman';
  text-decoration-skip-ink: none;
}

What is the expected behavior?
Dots are spaced consistently and do not overlap. The first dot should look consistent with the rest.

What went wrong?
The first (and sometimes last) dot is heavier/longer than the rest (presumably because it's overlapping with another one). It also sometimes has excessive spacing afterwards compared to other dots.

Did this work before? No 

Chrome version: 64.0.3282.119  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 28.0 r0

Firefox renders dotted underlines correctly. A similar bug used to exist in Chrome for dotted borders, but it was fixed (see https://stackoverflow.com/questions/46318491/border-bottom-dotted-has-solid-line-at-start-end-in-chrome and https://bugs.chromium.org/p/chromium/issues/detail?id=766977).
 

Deleted: chrome-excessive-long-first-dot.png 12.0 KB

	chrome-excessive-long-first-dot.png 12.0 KB View Download