I'm in the process of (attempting) to redesign this blog, and in doing so, I'm using a few of the new bits (to me) of CSS to make things fancy.
In this instance, I'm using text-decoration-thickness on my titles, and wanted to document the quirks I noticed.
What I'm doing
On blog post headings are marked up as h1 > a.permalink(href). The effect is: the title is not visibly underlined, and when you hover, the underline eases in over 50ms to a thickness of 4px.
As this specific link is marked up as the permalink (the microformats die hard), it's a link to the page we're reading. As such, I make a exception and (even on this pre-redesign page) the link doesn't look like a link.
(I was going to end there, but want to acknowledge the a screen reader is still going to raise this as a link, and… I don't have a good work around for this yet - and yes, that's shitty of me - I'm trying to improve)
All other links have the underline visible, then on hover have the same animated effect to thicken out the underline.
What Firefox does
It does exactly what I expected. And actually until I switched to give a cursory test of Chrome, I didn't actually expect to see anything different.
What Safari does
Safari doesn't animate the transition from text-decoration-thickness: 0px to 4px - it just jumps into place.
What Chrome does
My daily browser is Firefox, but I have a tendency to (lazily) assume that things "just work" in Chrome. Not a great strategy, eh?
Chrome has no animation, but moreover, a text-decoration-thickness of zero height is… still there.
Ah well, I guess it's a progressive enhancement.