Search code examples
csstransitionletter-spacing

Smooth letter-spacing transition on other browsers

I'm using the following to animate a hover transition:

a {
 letter-spacing: 1px;
 transition: all .5s ease-in;
}
a {
 letter-spacing: 2px;
}

Here is a jsBin.

At first I didn't expect this to be pretty but was pleasantly surprised when I saw how smoothly it was animated in Chrome. Even though it only changes 1px in the spacing, somehow Chrome gives the illusion of a smooth transition.

In Safari though it just jumps from 1px to 2px without that nice smoothing effect.

Is there any way to get the same effect in Safari?

(Alternatively, is there a CSS-only way of disabling this in non-Chrome browsers?)

Solution

  • I mis-read the entry for letter-spacing in the list of CSS Animated properties. In actual fact, any type of length unit is able to be used with the letter-spacing animation. It appears that Safari doesn't smoothly animate a 1 pixel difference - a bug.

    The solution for small letter-spacing animations cross-browser is the use of em units and also a smaller delay of .1s to get a smooth transition. Safari does not have as smooth an animation for small letter-spacing animations, but it is passable.

    Updated example jsBin with an em unit (Tested and working in Safari, Firefox, Chrome)

    CSS

    a {
 letter-spacing: 1px;
 transition: all .1s ease-in;
}
a:hover {
 letter-spacing: 0.2em;
}

    Available browser prefixes (if needed):

    -webkit-transition: all .1s ease-in;
-moz-transition: all .1s ease-in;
-ms-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
transition: all .1s ease-in;