DrawSVG & MorphSVG Mask animation iOS issue

[ceindeg]

I'm experiencing an issue with an SVG mask animation in iOS only. Happens in iOS Safari & Chrome.

I'm using the MorphSVG and Draw SVG plugins to create the animation (see codepen -sorry the html is a mess - it's generated dynamically so I've done a copy/paste)

 

On iOS the animation doesn't run at all, in fact nothing shows up. It works fine on Android, also works on all desktops and I'm totally baffled. Any ideas? 

 

 

All help much appreciated!!

 

Thanks

Louisa

See the Pen GdWLxy by clkdigital (@clkdigital) on CodePen

[Carl]

I tried sending the "full page" view of your demo to my phone and got this warning: http://prntscr.com/jcdsx1

 

I think you should try testing the demo on your phone in "full page" or "debug" mode.

The codepen editor sometimes causes problems on mobile.

 

If the problem still persists, please try to reduce your demo to single tween on a single shape. It will be much easier for us to help you.

[PointC]

Hi @ceindeg

 

I can't test on iOS to see what you're seeing, but my guess would be that it's being fussy with drawing circles in the mask. One thing to try would be converting those circles to paths. You can do that in your vector software or the MorphSVG plugin has a convert to path method.

 

https://greensock.com/docs/Plugins/MorphSVGPlugin

 

Circles present some strange issues from time to time. We have a big circles thread that may also have some useful info for you.

Hopefully that helps. Happy tweening.

 

[ceindeg]

Hi Craig, I mentioned in my post I'm already using the MorphSVG plugin so that wouldnt be the issue.

[PointC]

Your pen is loading the Morph plugin, but you're not converting the circles to paths. It doesn't do it automatically. You'd need to add this code:

 

MorphSVGPlugin.convertToPath("circle");

 

Happy tweening.

 

[ceindeg]

@Carl thanks for pointing that out I didn't realise! I've now verified my email so it should work. 

 

@PointC

Thanks for the spot - I had included the MorphSVG code into my original code I just forgot to include it in my codepen.

 

I've now added to my codepen 

See the Pen GdWLxy by clkdigital (@clkdigital) on CodePen

 but the problem persists. Even in full screen mode the charts don't render...

 

[ceindeg]

I've create a new copdepen with a single shape / mask animation

 

See the Pen KRWjmv by clkdigital (@clkdigital) on CodePen

 

This also doesn't render at all on iOS... any ideas? MorphSVG plugin definitely incuded and the issue persists.

[PointC]

I just tested on my iPad. Everything looks fine to me in Safari and Chrome. I don't have a Mac so I can't test desktop versions of those browsers on iOS, but maybe someone else can check for you.

[ceindeg]

@PointC thanks that's really interesting, my iPad is really old and doesn't play it (not overly worried about that) but it definitely doesn't work on iPhones  - even new ones :-\

[PointC]

I have an older iPad 2 for testing and it played on that for me. I wish I could test more for you.

[ceindeg]

@PointC thank you that's so nice! I've got an iPad 4 and it doesn't play on that... Safari or Chrome. I wonder if I've found a GSAP bug? I can't see anything amiss with my code?

[PointC]

o.k. -  i grabbed another iPad from someone else. This is a 3 and it's running iOS 10.3.3. The animation does not work on that one. 

 

My iPad 2 running iOS 9.3.3 is playing the animation. The old clunker with an outdated operating system works fine. Weird. 

[GreenSock]

This has nothing to do with GSAP - it's a rendering issue with Safari. GSAP is setting all the values properly, but Safari is ignoring the updates and basically not drawing the revised graphics to the screen. To force Safari to redraw things properly, you can change the transform of the affected (masked) elements. It's like Safari says "oh, okay, something significant changed about this thing, so let me rasterize it again and redraw the pixels". In this case, it's the <g> elements. Even if you literally change x (or y or rotation or whatever) by 0.01, it'll trigger it. Here's a fork: 

 

See the Pen 44b8cb94f2be7e0e1e6110bca2c01d7a by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[PointC]

That sounds like what we've been seeing in Edge and its sudden fussiness with masks. I guess a slight rotation to mask animations is just a new fact of life. Browsers sure are fun.

 

[ceindeg]

Jack that works like a charm!! Thank you so much. 

 

I already had a tiny rotation on the mask tween to fix an IE/Edge bug...

If only IE & Safari could use the same bug fixes that would make it easier!!