Jump to content
Search Community

SplitText cuts off characters on Safari

Black Ducas test
Moderator Tag

Recommended Posts

Hi,

check the below Codepen on Safari (desktop and mobile) and look at the "f" characters: you'll see that they're cut off until the animation ends (I just took the SplitText demo to make it more clear) causing a bad jump making it buggy. 

 

Is this maybe a Gsap bug? Any way to solve it?

Thanks

 

See the Pen VwrgMJR by gooogooo (@gooogooo) on CodePen

Link to comment
Share on other sites

Hey @Black Ducas,

 

No GSAP bug. From the DOCS:

 

Some browsers (like Safari) apply custom kerning by default between letters, so when characters are split apart and put into their own divs, the spacing is slightly different. A bug has been filed with the Safari team (it’s a browser issue, not SplitText) but you can typically eliminate the differences by setting these CSS properties: ...

 

In your case try:

 

letter-spacing:4.2px;  // ???
-webkit-text-rendering: optimizeSpeed;
text-rendering: optimizeSpeed;
-webkit-transform: translateZ(0);
transform: translateZ(0);

 

Happy tweening ...

Mikel

 

 

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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.
×
×
  • Create New...