Split Text break points issue on Safari

[that_guy_josh]

I'm having an issue with my SplitText and ScrollTrigger setup. The effect is to paint each line blue as the user scrolls. It renders perfectly on Chrome but on Safari (desktop and IOS), the line breaks happen in weird places.

I recreated the animation in CodePen but couldn't replicate the issue in Safari, so not sure what's happening. For further context, I am building in WordPress using Bricks Builder, so there maybe a script conflict? Not sure, but any help is greatly appreciated!

CODE:

export function highlightTextOnScroll() {
  gsap.registerPlugin(ScrollTrigger, SplitText);

  document.fonts.ready.then(() => {
    SplitText.create(".scroll-highlight", {
      type: "lines",
      linesClass: "line",
      autoSplit: true,
      onSplit: (instance) => {
        const animations = instance.lines.map((line) => {
          return gsap.to(line, {
            backgroundPositionX: 0,
            ease: "none",
            scrollTrigger: {
              trigger: line,
              scrub: true,
              start: "top center",
              end: "bottom center",
            },
          });
        });
        return animations;
      },
    });
  });
}

CHROME:
SAFARI:

See the Pen dPodvvj by josh_mitch (@josh_mitch) on CodePen.

[that_guy_josh]

I actually just found the issue: I have text-wrap: balance set on all my heads in my CSS reset and this seems be causing the issue on Safari browsers. 

I'm not sure if this is a bug then and needs to be addressed?

[Cassie]

Known limitation I'm afraid (browsers are tricky things)

https://gsap.com/docs/v3/Plugins/SplitText/#tips--limitations

[that_guy_josh]

11 hours ago, Cassie said:

Known limitation I'm afraid (browsers are tricky things)

https://gsap.com/docs/v3/Plugins/SplitText/#tips--limitations

Ah I must have missed this (and also forgot I had it in my reset).

Thanks very much!