Inline SVG css animation not working on Safari

I’m using the latest version of these:

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384- 
  DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> 
  </script>

  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" 
  integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" 
  crossorigin="anonymous"></script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" 
  integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" 
  crossorigin="anonymous"></script>

This is the CSS I am using to achieve the desired CSS animation effects across literally all browsers except Safari.

.tt-divider {
      border-style: outset;
      border-color: LawnGreen;
      border-radius: 3px;
      margin-bottom: 2.5vh;
      margin-top: 2.5vh;
      background: gold;
      border-width: 2px;
      animation: grow-divider 2s forwards linear;
      margin: auto;
  }
  @-webkit-keyframes grow-divider{
      from {width:0%; }
      to {width:100%; }
  }
  @keyframes grow-divider{
      from {width:0%; }
      to {width:100%; }
  }
  
  #landing-logo {
      display: inline-block;
      max-width: 350px;
      min-width: 150px;
      width: 50vw;
      margin-top: 5vh;
      margin-bottom: 1vh;
  }
 #navigation{
      padding-left: 7.5vh;
      padding-right: 7.5vh;
      text-align:center;
 }
 #btm-right-nav{
     max-width: 55px;
     position: fixed;
     right: 25px;
     bottom: 10px;
 }
 .btm-right-ico {
     display: block;
     color: lawngreen;
     margin:auto;
     margin-bottom: 5vh;
     font-size: 16px;
     text-rendering: optimizeLegibility;
 }
 .fontawesome-i2svg-active .btm-right-ico {
     animation-name: grow-buttons;
     animation-duration: 2s;
     animation-timing-function: linear;
     animation-play-state: running;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-direction: normal;
 }
 @-webkit-keyframes grow-buttons{
      from {font-size:16px; }
      to {font-size: 45px; }
  }
 @keyframes grow-buttons{
      from {font-size:16px}
      to {font-size:45px;}
  }

The grow-divider animation works perfectly, and another irrelevant one works perfectly as well on a different page. The only one I cannot get to work only on Safari is the grow-buttons animation. Yes Safari in general I’ve back-tested every version made in the past 5 years it does exactly the same thing..

Initially I thought it was a CSS naming problem… no I’ve tried multiple implementations of CSS for compatibility to no avail. I then thought it was just Safari, it could be, but why are my other CSS animations working then? I even put my CSS on the newly generated element via JS and it doesn’t work. I even used async programming in JQuery to make sure the CSS wasn’t applied before the <i> was changed to <svg> It’s worth mentioning that the CSS classes on the original <i> element are injected into the new <svg> from font-awesome… so the CSS animation is inherited.. this logic works on all browsers except Safari… I have absolutely no idea what is causing it, anyway here’s the html for the entire page:

     <!--Display none is changed to block when the page is done loading-->
     <div id="landing" style="display:none">


     <div id="navigation">
     <img id="landing-logo" src="example.gif" alt="example">
     <div class="tt-divider"></div>
    
    
     <div id="page">
        
     </div>
    
    
     <div id="btm-right-nav">
        
         <i class="fas fa-bars  btm-right-ico" data-fa-mask="fas fa-circle" data-fa- 
         transform="shrink-7"></i>
        <i class="fas fa-phone btm-right-ico" data-fa-mask="fas fa-circle" data-fa- 
          transform="shrink-7"></i>
        
      </div>
   </div>
 </div>

I think I could get it to work if I just yanked my own svg and put it neatly in an <img> and didn’t do some masking magic on my buttons.. I don’t want to do that because that’ll cut off a ton of features of fontawesome and take more time… so in the meantime I have the animation turned off for Safari users and it’s sad because I want this animation it’s incredibly satisfying and I really don’t want to have to bake my own masked SVGs and put them in a <img> just so I can run CSS animations over SVGs… I mean.. is that what I have to do?

Can I inject inline SVG into a src?

Here’s the baked SVG data from fontawesome after the page loads (I took out the data:)

   <div id="btm-right-nav">
        
        <svg class="svg-inline--fa fa-bars fa-w-16 btm-right-ico" data- 
   fa-mask="fas fa-circle" data-fa-transform="shrink-7" aria- 
   hidden="true" focusable="false" data-prefix="fas" data-icon="bars" 
  role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" 
    data-fa-i2svg=""><defs><clipPath id="clip-hzzHNtGIZRrn"><path 
   fill="currentColor" d=""></path></clipPath><mask x="0" y="0" 
 width="100%" height="100%" id="mask-jyjnVEKbKq5c" 
 maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"><rect 
  x="0" 
 y="0" width="100%" height="100%" fill="white"></rect><g 
transform="translate(256 256)"><g transform="translate(0, 0)  
scale(0.5625, 0.5625)  rotate(0 0 0)"><path fill="black" d="" 
  transform="translate(-224 -256)"></path></g></g></mask></defs><rect 
   fill="currentColor" clip-path="url(#clip-hzzHNtGIZRrn)" 
    mask="url(#mask- 
    jyjnVEKbKq5c)" x="0" y="0" width="100%" height="100%"></rect></svg> 
    

  <!--<i class="fas fa-bars  btm-right-ico" data-fa-mask="fas fa- 
   circle" 
  data- 
 fa-transform="shrink-7"></i> Font Awesome fontawesome.com -->


        <svg class="svg-inline--fa fa-phone fa-w-16 btm-right-ico" data- 
 fa-mask="fas fa-circle" data-fa-transform="shrink-7" aria-hidden="true" 
focusable="false" data-prefix="fas" data-icon="phone" role="img" 
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa- 
 i2svg=""><defs><clipPath id="clip-YDDPIJZX3DpE"><path 
  fill="currentColor" d=""></path></clipPath><mask x="0" y="0" 
    width="100%" height="100%" id="mask-eJs29EAdXlZv" 
 maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"><rect 
 x="0" y="0" width="100%" height="100%" fill="white"></rect><g 
 transform="translate(256 256)"><g transform="translate(0, 0)  
 scale(0.5625, 0.5625)  rotate(0 0 0)"><path fill="black" d="" 
transform="translate(-256 -256)"></path></g></g></mask></defs><rect 
  fill="currentColor" clip-path="url(#clip-YDDPIJZX3DpE)" 
  mask="url(#mask- 
 eJs29EAdXlZv)" x="0" y="0" width="100%" height="100%"> 
     </rect></svg> 
   <!--<i class="fas fa-phone btm-right-ico" data-fa- 
 mask="fas 
    fa-circle" data-fa-transform="shrink-7"></i> Font Awesome 
 fontawesome.com-->
        
 </div>

Answer

Wow….. really hope this helps someone…

To fix the problem you use regular old css to transform scale it in the animation.

Font-size can be used to scale up inline SVGs on all browsers except Safari

@-webkit-keyframes grow-buttons{
      from { -webkit-transform: scale(1); transform: scale(1);}
      to { -webkit-transform: scale(3); transform: scale(3);}
  }
@keyframes grow-buttons{
      from { -webkit-transform: scale(1); transform: scale(1);}
      to { -webkit-transform: scale(3); transform: scale(3);}
  }

Bottom line:

Use transform: scale() instead of font-size: ()px on SVG CSS animations to maximize compatibility.