Jump to content
Search Community

Centered Split-Text Safari Bug

elegantseagulls test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm having an issue on Safari (desktop and mobile) when I have a line-break  (due to responsive or otherwise) with centered text in a split-text animation. The animation runs, but on mySplit.revert() there's a noticeable jump. I was able to resolve the issue in FireFox and Chrome by adding font-kerning: none, but cannot figure out a fix for the centered text bug in Safari. Any ideas?

 

 

 

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

Link to comment
Share on other sites

Hi @elegantseagulls,

 

I'm rendering with some outlines to make it more obvious the "what" ... but I haven't figured out the "why". The "what" is that while the character bounding divs (.point) are the correct size, the characters within are being stuck to the left edge. I think the snap (upon calling mySplitTextH1.revert() )is them moving into a position that would be very close to centered within those divs.

 

See the Pen eaNQzJ?editors=0110 by sgorneau (@sgorneau) on CodePen

 

But, all of my positioning techniques for those characters is proving useless at this moment. I'm sure I'm missing something obvious, however ? ... so a solution is on the way!

  • Like 3
Link to comment
Share on other sites

There are two issues I see:

 

There's a space at the end of each word (otherwise, all the words would collapse) and the browser actually renders that space when everything is wrapped in inline-block <div>'s. When it's just plain/unwrapped text, the browser can be like "oh, I'll ignore that space on the end of the line when it wraps". The solution: tell SplitText to split based on lines too (so in your case, type:"chars,words,lines"). 

 

The other issue is purely a Safari thing regarding how it handles kerning. It's trying to be "helpful" by applying all that kerning when certain letters are next to each other, but of course that won't work if they're wrapped in <div>'s. As far as I know, it's simply impossible. And even when I set font-kerning:none, it didn't always solve things. Improved, yes, but I still noticed slight shifting with certain characters. I have researched that and I cannot find any way to tell Safari to knock it off. Sorry :(

  • Like 4
Link to comment
Share on other sites

@GreenSock

That's putting me in the right direction (I hope), though I've found an interesting bug in the process:

 

If I target a heading tag's parent, and the max-width is dictated by the heading's grandparent, 'lines' isn't working—it just wraps the entire heading tag.

 

See CodePen:

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

 

Using 'lines' was my hunch to help my text-jumping issue, but I didn't see that it wasn't working as expected. I'm using this animation as a component in React, which was my reasoning for targeting the parent (it's unknown what the child's tag may be [<h1>, <h2>, < p>, etc])/ 

 

 

Link to comment
Share on other sites

6 hours ago, elegantseagulls said:

If I target a heading tag's parent, and the max-width is dictated by the heading's grandparent, 'lines' isn't working—it just wraps the entire heading tag.

 

From the docs:

Quote

Splitting nested elements by "lines" is not supported (here is a workaround). 

 

So are you all set now? 

  • Like 2
Link to comment
Share on other sites

@GreenSock

Aaaaaahhhh yeah, I remember reading that now...it's why I bailed on using 'lines' the first time (it's been a big, long, exciting project). Then I failed to recheck the docs, after noticing the 'lines' issue after your suggestion to use 'lines'.

Aaany how, all good now! I'll share the site here once it's live.

  • Like 2
Link to comment
Share on other sites

  • 2 months later...

OK. The site is finally live, and I'm really excited about how the animations turned out on it: Especially the Logo hover, mobile hamburger toggle, and (very related to this thread) the heading animations.

 

Hope you all like it, and thanks again for the assist in debuggin the SplitText issues in Safari.

 

Here's the site: https://wavesforwater.org/

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