Safari rendering issue on retina monitor when use MorphSVG

[lklio]

Hi guys,

I've an issue with Safari rendering when I use MorphSvg Plugin to change SVG path of a mask.

With other browser I've no problem, but with Safari Desktop (monitor over 1920x1080), and Safari Mobile,  the SVG morphing animation is not fluid.

I'm using the scrollPlugin, but also without that integration the result is the same.

 

Any ideas?

Thanks to everyone.

 

See the Pen MWyWamz by lucalionetti_ (@lucalionetti_) on CodePen.

[ZachSaucier]

Hey lklio and welcome to the GreenSock forums.

 

Different browsers perform differently running the same animations. There's no working around that unfortunately. GSAP has to work with whatever implementations that browsers have for the given features - apparently Safari's implementation of animating large masks is not very performant.

 

For what it's worth, it doesn't look as jerky in Safari on my computer as the video that you show.

 

Potential ways to improve performance:

• Limit the size to keep the mask and masked area smaller.
• Make the masked area more simple (try using a static image instead of a video, limit the number of elements being masked). 

Again, there's no way GSAP can fix this issue. Sorry about that, we wish there was!

[Shrug ¯\_(ツ)_/¯]

I wonder if it would perform any better if you just scale, rotate a div (overflow hidden) along with changing the four border radius. Better yet maybe mask the video tag with canvas and approach it that way? Either might be worth a try.

 

In 2020 I though MS thought IE would be used by 99.999% of internet by now. Thankfully that didn’t work out, but sometimes Safari feels like the new IE. ?

[lklio]

Thanks guys for replies.

@ZachSaucier I've supposed the issue couldn't be a GSPA problem because on other browser it works fine... Opera desktop too!

I've tried with static image but the result is the same. Also with rotation or transform... Force re-rendering unfortunately in this case couldn't help@Shrug ¯\_(ツ)_/¯... Maybe on mobile but I've not tested yet.

 

The only solution is to limit the viewport to 1920x1080px but for this project I need a full screen video as intro...

I agree with you @Shrug ¯\_(ツ)_/¯, Safari is the new crash test browser ?