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>
Advertisement
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.