Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
TLP

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

Recommended Posts

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

Link to comment
Share on other sites

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);
  • Like 5
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 years later...

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?

Link to comment
Share on other sites

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.

:)

  • Like 5
Link to comment
Share on other sites

I just got word back that

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

worked

Link to comment
Share on other sites

  • 1 year later...

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

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×