Brave & Opera Browser Animations

[jdhadwin]

@GreenSock

 

Hi guys, I created a logo animation for an upcoming site launch.  It uses an SVG mask to punch out a white SVG and reveals the video beneath, all while GSAP animates the reveal.  In a second or two, the white fades, the logo reforms and drops to what will become a nav bar.  Works great in Chrome, Safari, & Firefox, EXCEPT not in Brave & Opera browsers only respect certain parts of the animation.

 

Here's what's really weird.  Half the animation goes pretty much as expected.  Yet even the first half IS animating on the targeted elements, as demonstrated when I look at the inspector.  Though the elements are animating, the onscreen result is nada.  See if you also have this phenomenon in Opera & Brave whilst not at all in Safari, Chrome, or Firefox.

 

If any of the collective wisdom has already advised on this matter, thanks in advance for the tip-off.  All help is appreciated.

See the Pen oNOoLqN by jdhadwin (@jdhadwin) on CodePen

[akapowl]

@jdhadwin

Hello there.

While your demo is not exactly minimal, which makes it kind of hard to see through everything, on a quick glimpse I noticed, that you are trying to animate svg elements that are in <g> groups from a scale of 0, which I think is at least part of your problem - and I don't think this specifically is GSAP related.

I stumbled upon this a few days ago, too - happening for me in all Chromium based browsers on Windows 11. It appears to be a bug in the chromium browser base that was already reported in September 2022 by @Cassie and later marked as solved from what I can tell reading that old bug report - but now it seems to have resurfaced.

@Cassie if you find the time, could your maybe re-new that report or something like that? ... I have absolutely no clue how those work, tbh.

https://issues.chromium.org/issues/40240236

These following pens don't use GSAP at all - and as you should be able to see, when elements in groups are being 'manipulated' so they start out with a scale of 0 and then changed later on, their values will get changed properly inline on the element - but the element just won't get rendered then (unless you resize the window along the process, e.g., or scroll the SVG fully out of viewport and then back into view again).

See the Pen vYMWZrL by akapowl (@akapowl) on CodePen

This will not happen with elements that are not in <g> groups, though.

See the Pen QWPOgzm by akapowl (@akapowl) on CodePen

What helped for me as a workaround was to tween from a very small scale like 0.001 instead of absolute 0. Maybe that can help you out somehow, until that issue gets resolved again.

I will add, that this is just something I was able to quickly notice. If it doesn't help in your case, and you suspect that there still might be some issues with GSAP, please create a demo that is boiled down to the bare minimum but still reproduces the issue you're having, so it is easier to identify for others, what could be causing it.

See the Pen dyLZzyM by akapowl (@akapowl) on CodePen

 

[Cassie]

Commented on that thread again! 🫠

[akapowl]

Thanks! ...let's just hope they don't take it as an April Fools' Day prank.😅

[Cassie]

@akapowl - Would you be able to chime in here? - I can't see the issue, I don't have a windows machine

https://issues.chromium.org/issues/40240236

[akapowl]

1 hour ago, Cassie said:

Would you be able to chime in here? - I can't see the issue, I don't have a windows machine

Just did 👍

Edit - For anyone wanting updates on this:

Since that is not considered a regression of the fix for the original issue, it got opened as a new issue.

https://issues.chromium.org/issues/332328859

[jdhadwin]

10 hours ago, akapowl said:

@jdhadwin

Hello there.

While your demo is not exactly minimal, which makes it kind of hard to see through everything, on a quick glimpse I noticed, that you are trying to animate svg elements that are in <g> groups from a scale of 0, which I think is at least part of your problem - and I don't think this specifically is GSAP related.

I stumbled upon this a few days ago, too - happening for me in all Chromium based browsers on Windows 11. It appears to be a bug in the chromium browser base that was already reported in September 2022 by @Cassie and later marked as solved from what I can tell reading that old bug report - but now it seems to have resurfaced.

@Cassie if you find the time, could your maybe re-new that report or something like that? ... I have absolutely no clue how those work, tbh.

https://issues.chromium.org/issues/40240236

These following pens don't use GSAP at all - and as you should be able to see, when elements in groups are being 'manipulated' so they start out with a scale of 0 and then changed later on, their values will get changed properly inline on the element - but the element just won't get rendered then (unless you resize the window along the process, e.g., or scroll the SVG fully out of viewport and then back into view again).
 

 

This will not happen with elements that are not in <g> groups, though.

 

 

 

 

What helped for me as a workaround was to tween from a very small scale like 0.001 instead of absolute 0. Maybe that can help you out somehow, until that issue gets resolved again.

I will add, that this is just something I was able to quickly notice. If it doesn't help in your case, and you suspect that there still might be some issues with GSAP, please create a demo that is boiled down to the bare minimum but still reproduces the issue you're having, so it is easier to identify for others, what could be causing it.

 

 

 

 

 

 

 

 

 

Wow, based on what you said, I tried it while resizing the window and you could see the animation running, but as soon as you stop the resize the problem remains.  Without <g> tags I'm kind of screwed, so I was looking forward to solving my problem using your work-around.  However I found that even after commenting out all the scale-based tweens, leaving behind only one thing:
 

gsap.set('#siteLogo0, #siteLogo', {y:100});

 In the following codepen, I removed everything except this set() command, and the problem remains in Brave and Opera.  So the Chromium problem is now bigger than it used to be.  It isn't just scale:0 as it was in 2022.  Now it is also the transform property.  Aware it's not gsap.

See the Pen eYoeKpz by jdhadwin (@jdhadwin) on CodePen

[GreenSock]

Yeah, definitely a browser rendering issue. I did poke around a bit and it looks like the fundamental problem has to do with the mask, so the key is to make some kind of change that forces the browser to kinda wake up and realize it should re-render. So here's a fork where I set x: 0.01 on the mask element (I added a "test" class to it) AFTER the y position of the logo is updated: 

 

See the Pen QWPmRxz?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If you remove line 29, you'll see that the logo doesn't render properly at the y: 200 value. 

 

I hope that helps.