SVG-анимация не работает в Safari

Question

Мы работаем над веб-приложением (реагируем) с SVG-анимацией. Наши SVG-анимации прекрасно работают на настольных компьютерах и в сети Android, но не для анимированных устройств ios (тестирование в Safari на iPhone 5s, 8 и 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

Попробуй так.

 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
     }
    `;