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.
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.