Lottie-web: Animations not running on ios mobile web

[joelponce]

Hello,

We are working on a Vue web app with svg animations. Our ae animations are working great on desktop web and android web, but do not render on ios devices (testing on Safari and Chrome on iPhone 5C and 8+). When I inspect these elements, I notice that all the g tags in the svg file are given a display: none property. When I manually remove these in the Safari dev tools, the image appears but does not animate.

This is my options object:

{
    container: this.$refs.lavContainer, // using a modified version of lottie-vue wrapper
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: '/images/json/test.json'
}

Installed through npm install lottie-web

I've been working with our custom animations as well as testing with other files like this: https://editor.lottiefiles.com/?src=https://www.lottiefiles.com/download_public/1314

I searched through other issues and couldn't find someone with a similar problem. Any ideas what's keeping these animations from rendering on ios mobile web browsers?

[bodymovin]

Hi, can you share a link where it fails?

[joelponce]

I was hoping we'd have a public site to share but we do not yet :/
In recent tests I've noticed this happens not just on ios devices but any mobile-size screen.

Edit: It's not any mobile-size screens - only ios devices and simulators (such as Chrome devtools set to iPhone 7, etc). All android devices load successfully as well as desktop/laptop screens.

[statik]

@joelponce I'm running into this same problem, were you able to resolve it?

[joelponce]

Hey @statik I was not able to solve this and am no longer working on this project.