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

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


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


If you are having performance problems in Chrome you could try forcing the element onto the GPU where it is rendered on it's own layer. This can be done using translate3d

Example

p{   -webkit-transform: translate3d(0,0,0);}

It is also worth using chrome dev tools timeline to narrow down what the problem is.

Performance profiling with the Timeline


In your example It's not possible to get it smooth as the transition decreases by 1px on each step, it works just like any other css property that uses pixels, if you increase the px you will see it does actually render smoothly like in this example Demo

If you add such a minor change in pixels to another pixel property with a long duration you will see the same Step visibility effect like in this Demo

So, the only way this would be possible is if you could tell chrome to change the step to something like 0.1px but unfortunately you cannot do that.

So saying all that and finding out that it does the same on every property if you add that kind of (change + transition) combination I would say this is not a bug.