- 1.6k
- 2
- 31
- 53
This CSS transition works in Gecko (Firefox) and WebKit (Safari) browsers but not in Chromium. Is it a Chromium bug or is there a more specific implementation to make this work?
I can't find anything about this issue in the Chromium issues or anywhere else. Surely I am not the first one trying to transition text-decoration-thickness...?
a {
text-decoration-skip-ink: none;
text-decoration-thickness: 2px;
transition: text-decoration-thickness 1s;
}
a:hover {
text-decoration-thickness: 10px;
}
a {
/* the line below (or similar) was missing
from the original question,
but it is critically important to reproduce
the effect — SA
*/
text-decoration: underline;
text-decoration-skip-ink: none;
text-decoration-thickness: 2px;
transition: text-decoration-thickness 1s;
}
a:hover {
color: red;
text-decoration-thickness: 10px;
}<!DOCTYPE html>
<html>
<body>
<a>This is an anchor</a>
</body>
</html>Important note: I am not looking for a workaround to make lookalike text decoration. I am questioning spec compliance.
This CSS transition works in Gecko (Firefox) and WebKit (Safari) browsers but not in Chromium. Is it a Chromium bug or is there a more specific implementation to make this work?
I can't find anything about this issue in the Chromium issues or anywhere else. Surely I am not the first one trying to transition text-decoration-thickness...?
a {
text-decoration-skip-ink: none;
text-decoration-thickness: 2px;
transition: text-decoration-thickness 1s;
}
a:hover {
text-decoration-thickness: 10px;
}
Important note: I am not looking for a workaround to make lookalike text decoration. I am questioning spec compliance.
This CSS transition works in Gecko (Firefox) and WebKit (Safari) browsers but not in Chromium. Is it a Chromium bug or is there a more specific implementation to make this work?
I can't find anything about this issue in the Chromium issues or anywhere else. Surely I am not the first one trying to transition text-decoration-thickness...?
a {
/* the line below (or similar) was missing
from the original question,
but it is critically important to reproduce
the effect — SA
*/
text-decoration: underline;
text-decoration-skip-ink: none;
text-decoration-thickness: 2px;
transition: text-decoration-thickness 1s;
}
a:hover {
color: red;
text-decoration-thickness: 10px;
}<!DOCTYPE html>
<html>
<body>
<a>This is an anchor</a>
</body>
</html>Important note: I am not looking for a workaround to make lookalike text decoration. I am questioning spec compliance.
text-decoration-thickness transition in Chromium
This CSS transition works in Gecko (Firefox) and WebKit (Safari) browsers but not in Chromium. Is it a Chromium bug or is there a more specific implementation to make this work?
I can't find anything about this issue in the Chromium issues or anywhere else. Surely I am not the first one trying to transition text-decoration-thickness...?
a {
text-decoration-skip-ink: none;
text-decoration-thickness: 2px;
transition: text-decoration-thickness 1s;
}
a:hover {
text-decoration-thickness: 10px;
}
Important note: I am not looking for a workaround to make lookalike text decoration. I am questioning spec compliance.