Is there any way to get Chrome to do CSS transitions with letter-spacing smoothly?

Question

I am attempting to have a nice CSS transition for letter-spacing property.

It looks great in Firefox and Internet explorer 10 (something finally works as expected in IE. Omg, right?)

But it doesn't work in Chrome or Opera. In Chrome it is a series of jitters, so it goes from 2px to 1px to 0. No smooth-pixel rendering like in IE/Firefox.

Is there any way to make Chrome render it smoothly?

Here is a simple example:

p {     letter-spacing:2px;      -webkit-transition: letter-spacing, 1s;     -moz-transition: letter-spacing, 1s;     -o-transition: letter-spacing, 1s;     transition: letter-spacing, 1s; } p:hover {letter-spacing:0;} 

http://jsfiddle.net/aDhRz/

Answer 1

This problem is now fixed in Blink (powering the Chrome layout engine) but not yet rolled out in stable Chrome. But you can see it's working fine now in Chrome Canary.

Until it's available for everyone, I don't think there will be a workaround without a JavaScript solution using canvas. We're lucky Chrome auto-updates :)

Blink fix: http://src.chromium.org/viewvc/blink?view=revision&revision=153727

Seems that Google is taking Blink development seriously, because this bug exists in WebKit since 2008, and it's still not fixed.

WebKit bug report: https://bugs.webkit.org/show_bug.cgi?id=20606