GSAP + Tailwind working fine on Windows Chrome/Firefox but breaking on macOS Safari

[Sijo]

Hi everyone,

I’m facing a strange issue with my project and I hope someone here can point me in the right direction.

My webpage works perfectly on Windows (Chrome & Firefox) - both the Tailwind CSS styling and the GSAP animations (using ScrollTrigger + transforms) behave exactly as expected.

But when I test the same project on macOS Safari, two problems occur:

1. Tailwind styles don’t render consistently - layout, spacing, and positioning look different compared to Chrome/Firefox.

2. GSAP animations aren’t working properly - ScrollTrigger doesn’t fire smoothly, transforms behave differently, and the animation flow is inconsistent compared to Windows browsers.

I’ve double-checked that:

• Tailwind is compiled correctly and works fine in Chrome/Firefox.

• GSAP + ScrollTrigger setup is correct with no console errors.

• The issue only happens in Safari on macOS.

My questions are:

• Has anyone run into Safari-specific quirks with GSAP + Tailwind?

• Are there known Safari rendering or transform bugs that affect GSAP?

• What’s the best way to debug GSAP + Safari compatibility issues (e.g., hardware acceleration, -webkit- prefixes, ScrollTrigger settings)?

• Any solutions or workarounds you’ve used successfully for Safari?

Thanks in advance for your help.

[Rodrigo]

Hi,

 

is worth noticing that you posted this thread in the Jobs & Freelance forums, so users that respond here will be expected to get paid for their help. Checking just in case.

[benoit]

The version of Safari is tied to the version of macOS, and sometimes certain CSS properties are too recent for everything to work well together.
Safari has a CSS debugging tool (Inspector) that can be enabled in its preferences.
Firefox has a "Compatibility" sub-tab in the HTML/CSS inspector.