Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
lklio

Safari rendering issue on retina monitor when use MorphSVG

Recommended Posts

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

Link to post
Share on other sites

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!

Link to post
Share on other sites

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. 😁

Link to post
Share on other sites

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 😅

 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×