[Safari bug ❌] backgroundSize is not animating

[ilyasseisov]

Hi 👋

Could you please help?

 

There is an onScroll animation of backgroundSize property (Codepen attached)

 

It works fine in Chrome browser, but doesn't work in Safari.

 

How can it be fixed?

 

Thanks in advance!

See the Pen mdQaNbG by Juxtopposed (@Juxtopposed) on CodePen.

[mvaneijgen]

Check out the following https://gsap.com/resources/mistakes/#using-css-transitions-and-gsap-on-the-same-properties, this is causing your issue   .text {transition: background-size cubic-bezier(.1,.5,.5,1) 0.5s;}

 

Hope it helps and happy tweening! 

[ilyasseisov]

Thank you!

 

I've removed all the transitions properties from CSS, but it didn't solve the issue )

See the Pen OJKoNLM by jssecrets (@jssecrets) on CodePen.

 

What else could it be?

[mvaneijgen]

Even with the transtion issue it worked fine for me on Safari. I've also tested it on iOS safari and also seems to work perfectly.

 

Do you have some more info for os? OS version/Platfrom/Safari version, maybe a screen recoding of what you're seeing. 

 

Again here everything works perfectly Version 17.6 and iOS version 18.0.1

[ilyasseisov]

Thank you!

 

I see what you are saying.

 

I've tested original Codepen I've sent.

 

✅  iPhone - iOS 16.6 - works 

❌ iPad - iPadOS 15.1 - doesn't work

❌ MacBook Pro - macOS Monterey - Safari (v. 15.4) - doesn't work

 

Screen recording of my Safari on MacBook - https://share.cleanshot.com/TgYbhwFC

 

Thank you!

[mvaneijgen]

I'm going to mark the topic maybe someone else has a good idea, but it seems like there was a bug in Safari, which they've fixed in a later version. I don't think GSAP can do anything about this. 

[ilyasseisov]

Appreciate your help!

Thank you!

[ilyasseisov]

@mvaneijgen do you know by chance any other way to animate this effect?

I'm asking because I've checked the website with a similar effect -  and works at all of the devices.

 

Website: https://minhpham.design/

 

Thanks in advance!

[mvaneijgen]

Ah, that is a good question. I do actually. You can use a gradient, check out @Carl's post. Hope it helps and happy tweening! 

 

 

[ilyasseisov]

Thanks for the reference!

I'm actually a member of Carl's club. I went through the Carl's code, played with it.

But the solution doesn't suit well.

 

I decided to go with a fallback.

 

  gsap.to(text, {
          backgroundSize: "100%",
          ease: "none",
          color: "white", // fallback
    ...})

In browsers with a full support user will a seebgSize animation, in old ones color transition from opacity .2 to 1.

 

 

Thank you for your help!