Svg animations not running on Safari

Question

We are working on a web app ( react ) with SVG animations. Our SVG animations are working great on the desktop web and Android web, but do not animated ios devices (testing on Safari on iPhone 5s, 8 and MacBook Pro).

const AnimationFooter = styled.div`
  margin-top: -18rem;
  height: auto;
  width: 100%;
  position: relative;

  @media (max-width: 420px) {
    margin-top: -15rem;
  }
  @media (max-width: 360px) {
    margin-top: -14rem;
  }
`;


const Im = styled.img`
  width: 100%;
  height: auto;
  /* -webkit-transform: translateZ(0); */

  @media (max-width: 420px) {
    margin-top: 6px;
  }
`;



<div>
   <AnimationFooter>
            <Im src="../static/images/home-image-ground.svg" />
     </AnimationFooter>
</div>

Answer 1

Try it in this way.

 const PetTabs = styled.div`
     .react-tabs__tab {
       width: 250px;
       margin-left: 40px;
       margin-right: -40px;
       border-color: #454440;
       border-width: 1px 1px 1px 1px;
       border-radius: 15px 15px 0 0;
       background-color: #454440;
       color: #ffffff;
     }

     .react-tabs__tab--selected {
       background-color: #ffffff;
       color: #454440;
     }

     .react-tabs__tab--selected :before,
     .react-tabs__tab--selected :after {
       position: absolute;
       bottom: -1px;
       width: 16px;
       height: 19px;
       content: ' ';
     }

     .react-tabs__tab--selected :after,
     .react-tabs__tab--selected :before {
       border: 1px solid #454440;
     }
     .react-tabs__tab--selected :before {
       left: -17px;
       margin-bottom: 1px;
       border-bottom-right-radius: 16px;
       border-width: 0 1px 1px 0;
       box-shadow: 7px 9px 0 #ffffff;
     }
     .react-tabs__tab--selected :after {
       right: -17px;
       margin-bottom: 1px;
       border-bottom-left-radius: 16px;
       border-width: 0 0 1px 1px;
       box-shadow: -6px 5px 0px 4px #ffffff;
       z-index: 15
     }
    `;