CODEWITHSUNDEEP
csstransitionletter-spacing
Juicy
Juicy

Reputation: 12530

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?)

Upvotes: 2

Views: 9820

Answers (2)

misterManSam
misterManSam

Reputation: 24702

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;

Upvotes: 4

Devin
Devin

Reputation: 7720

to disable it, use your code like this: 

@media screen and (-webkit-min-device-pixel-ratio:0) {
a {
letter-spacing: 1px;
transition: all .5s ease-in;
}
a {
letter-spacing: 2px;
}
}

this will disable your code in any non-webkit browser (thus, will only work in Chrome and Safari). Other than that, your code works fine, Webkit has just better smoothing engine, nothing else, but Firefox and IE handle it without issues, so really don't know what are you seeing in terms of differences

Upvotes: 2

Related Questions