SplitText.split() and SplitText.revert() changes letter-spacing on safari

[TLP 0 Likes (Newbie)]

I've searched alot, and its funny that nobody seem to have the same issue.

On Safari and MobileSafari evertime i split or revert letter-spacing between some characters changes.

 

does anyone knows why, or at least can confirm that.

 

Thanks alot.

See the Pen qEZoxg by anon (@anon) on CodePen

[GreenSock 8,117 Likes (Superhero)]

I believe you may be running across an issue caused by the fact that Apple changed the way it handles kerning by default in the latest OS which unfortunately we can't do anything about. There's simply no way that I know of to effectively counteract that. It's rather disappointing that Apple chose to go that [non-standard] route. I'd suggest looking into ways to prevent Apple's new default special kerning behavior. When I looked into it a while back, I couldn't find a way that actually worked even though you're supposed to be able to change it with a css property. See http://css-tricks.com/almanac/properties/t/text-rendering/

 

EDIT: For what it's worth, it does seem to help (but not completely solve it) if you apply this to your CSS:

-webkit-text-rendering: optimizeSpeed;
text-rendering: optimizeSpeed;
-webkit-transform: translateZ(0);

[TLP 0 Likes (Newbie)]

Wow, awesome! Thank you.

 

It's not perfect but it helped alot.

 

That was my first post here, and i got a huge help.

I'm using your tools, i guess since you started, and it was always a pleasure to work with.

Thanks for your great work.

[edmcamoil 0 Likes (Newbie)]

This post is old but I just ran into this, does this issue still exist? Any updates on solutions if that CSS doesn't help?

[PointC 8,599 Likes (Superhero)]

Hi edmcamoil 

 

Welcome to the GreenSock forum.

 

Have you tried this in your CSS?

font-kerning: none;

We had a similar question in another thread recently and that seemed to fix it.

 

Happy tweening.

[edmcamoil 0 Likes (Newbie)]

I just got word back that

-webkit-text-rendering: optimizeSpeed;
text-rendering: optimizeSpeed;
-webkit-transform: translateZ(0);

worked

[vektor 10 Likes (Newbie)]

Still an issue for me unfortunately

 

Update: Applied the style to the element specifically (I had a couple of spans inside a h2) and it helps! ?

 

( Still a little jump but luckily not very noticeable :)

[elegantseagulls 209 Likes (Specialist)]

font-kerning: none;

 

Was just about to post about this. Certain fonts seem to be a bit of a problem.

 

Check out this Pen with and without the font-kerning:

 

See the Pen bJpGog by elegantseagulls (@elegantseagulls) on CodePen