Wavy underline behaves strangely in chromium

user_8752259 0
Viewed 150

I have an issue with text-decoration-style: wavy in Chromium (73).

when the text decoration switches between solid and wavy, sometimes it is like it only renders the upper part, leaving the lower part in its previous state. It doesn't happen all the time for some reason I don't understand.

Is there anything I can do about it ?

div {
  text-decoration: underline;
  text-decoration-style: solid;
}

div:hover {
  text-decoration-style: wavy;
}
<div>Hello world</div>

Excepted rendering :

excepted excepted hover

Glitch :

unexcepted unexcepted hover

chromium css
1 Answers
  1. Add padding to the div.
  2. Use wavy for the hover with outline(kinda cheat code)

My guess is due to the underline on the div is what it is causing the issue.

div {
  padding: 5px;
  font-size: 30px;
  text-decoration: underline;
  display: inline-block;
}

div:hover {
  display: inline-block;
  text-decoration-style: wavy;
  /* looks like this code is needed */
  outline: 1px solid rgba(255, 255, 255, 0.1);
}
<div>Hello world</div>

user_35643590
Related