Animated stroke-dashoffset on iOS - css

Question

So, I have this SVG logo animated by increasing the stroke-dashoffset value
svg {
position: absolute; top: 50%; left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 150px;
}
.cls-1,
.cls-2 {
fill:none;
stroke:#a9a9a9;
stroke-linecap:round;
stroke-linejoin:round;
stroke-width:10px;
}
.cls-1 {
stroke-dasharray: 496;
stroke-dashoffset: -496;
animation: firstLine 2s ease-out 0s infinite normal;
}
.cls-2 {
stroke-dasharray: 458;
stroke-dashoffset: -458;
animation: secondLine 2s ease-out 0s infinite normal;
}
#keyframes firstLine {
0% { stroke-dashoffset: -496; }
40% { stroke-dashoffset: 0; }
60% { stroke-dashoffset: 0; }
85% { stroke-dashoffset: 496; }
100% { stroke-dashoffset: 496; }
}
#keyframes secondLine {
0% { stroke-dashoffset: -458; }
45% { stroke-dashoffset: 0; }
60% { stroke-dashoffset: 0; }
90% { stroke-dashoffset: 458; }
100% { stroke-dashoffset: 458; }
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200.17 135"><path class="cls-1" d="M132.67,28.44a39.06,39.06,0,0,1,0,78.12H113.22V59.11A54.11,54.11,0,0,0,5,59.11v57.35a13.54,13.54,0,0,0,27.08,0v-9.9h27"/><path class="cls-2" d="M113.63,5h19a62.5,62.5,0,0,1,0,125H102.44a16.29,16.29,0,0,1-16.3-16.29V59.11a27,27,0,0,0-54.06,0V79.89h27"/></svg>
When opened on desktop browser, everything is fine. Same for Android. But on iOS, the animation is going so wrong. Is there some iOS specific bug stroke-dashoffset that I'm not aware of?

Answer 1

I have been looking for a solution for a long time how to replace negative stroke-dashoffset values with positive values in order to circumvent the restrictions that safari imposes.
Explanations are given for animating one line. For the second line, the calculation is similar.
The total length of the line is 496 px; therefore, the value of
stroke-dashoffset = "496"completely hides the line.
With double value stroke-dashoffset ="992" line is drawn
With triple value stroke-dashoffset =" 1488 ", the line is erased
again
CSS solution
svg {
position: absolute; top: 50%; left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 150px;
}
.cls-1,
.cls-2 {
fill:none;
stroke:#a9a9a9;
stroke-linecap:round;
stroke-linejoin:round;
stroke-width:10px;
}
.cls-1 {
stroke-dasharray: 496;
stroke-dashoffset: 0;
animation: firstLine 2s ease-out 0s infinite normal;
}
.cls-2 {
stroke-dasharray: 458;
stroke-dashoffset: 0;
animation: secondLine 2s ease-out 0s infinite normal;
}
#keyframes firstLine {
0% { stroke-dashoffset: 496; }
40% { stroke-dashoffset: 992; }
60% { stroke-dashoffset: 992; }
85% { stroke-dashoffset: 1488; }
100% { stroke-dashoffset: 1488; }
}
#keyframes secondLine {
0% { stroke-dashoffset: 458; }
45% { stroke-dashoffset: 916; }
60% { stroke-dashoffset: 916; }
90% { stroke-dashoffset: 1374; }
100% { stroke-dashoffset: 1374; }
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200.17 135">
<path class="cls-1 " d="M132.67,28.44a39.06,39.06,0,0,1,0,78.12H113.22V59.11A54.11,54.11,0,0,0,5,59.11v57.35a13.54,13.54,0,0,0,27.08,0v-9.9h27" >
</path>
<path class="cls-2" d="M113.63,5h19a62.5,62.5,0,0,1,0,125H102.44a16.29,16.29,0,0,1-16.3-16.29V59.11a27,27,0,0,0-54.06,0V79.89h27" >
</path>
</svg>
Option with a shadow around the logo
Add shadow
<defs>
<filter id="shadow" x="-20%" y="-20%" width="200%" height="200%">
<feDropShadow dx="4" dy="8" stdDeviation="4"/>
</filter>
</defs>
body {
background: rgb(144,210,152);
background: linear-gradient(286deg, rgba(144,210,152,1) 29%, rgba(236,234,154,1) 69%);
}
svg {
position: absolute; top: 50%; left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 150px;
}
.cls-1,
.cls-2 {
fill:none;
stroke:#a9a9a9;
stroke-linecap:round;
stroke-linejoin:round;
stroke-width:10px;
filter:url(#shadow);
}
.cls-1 {
stroke-dasharray: 496;
stroke-dashoffset: 0;
animation: firstLine 4s ease-out 0s infinite normal;
}
.cls-2 {
stroke-dasharray: 458;
stroke-dashoffset: 0;
animation: secondLine 4s ease-out 0s infinite normal;
}
#keyframes firstLine {
0% { stroke-dashoffset: 496; }
40% { stroke-dashoffset: 992; }
60% { stroke-dashoffset: 992; }
85% { stroke-dashoffset: 1488; }
100% { stroke-dashoffset: 1488; }
}
#keyframes secondLine {
0% { stroke-dashoffset: 458; }
45% { stroke-dashoffset: 916; }
60% { stroke-dashoffset: 916; }
90% { stroke-dashoffset: 1374; }
100% { stroke-dashoffset: 1374; }
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220.17 150">
<defs>
<filter id="shadow" x="-20%" y="-20%" width="200%" height="200%">
<feDropShadow dx="4" dy="8" stdDeviation="4"/>
</filter>
</defs>
<path class="cls-1 " d="M132.67,28.44a39.06,39.06,0,0,1,0,78.12H113.22V59.11A54.11,54.11,0,0,0,5,59.11v57.35a13.54,13.54,0,0,0,27.08,0v-9.9h27" >
</path>
<path class="cls-2" d="M113.63,5h19a62.5,62.5,0,0,1,0,125H102.44a16.29,16.29,0,0,1-16.3-16.29V59.11a27,27,0,0,0-54.06,0V79.89h27" >
</path>
</svg>
SVG solution
svg {
position: absolute; top: 50%; left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 150px;
}
.cls-1,
.cls-2 {
fill:none;
stroke:#a9a9a9;
stroke-linecap:round;
stroke-linejoin:round;
stroke-width:10px;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200.17 135">
<path class="cls-1 " d="M132.67,28.44a39.06,39.06,0,0,1,0,78.12H113.22V59.11A54.11,54.11,0,0,0,5,59.11v57.35a13.54,13.54,0,0,0,27.08,0v-9.9h27" stroke-dasharray="496,496" stroke-dashoffset="496">
<animate id="an_offset"
attributeName="stroke-dashoffset"
begin="0s"
dur="3s"
values="496;992;992;1488"
fill="freeze"
repeatCount="indefinite" />
</path>
<path class="cls-2" d="M113.63,5h19a62.5,62.5,0,0,1,0,125H102.44a16.29,16.29,0,0,1-16.3-16.29V59.11a27,27,0,0,0-54.06,0V79.89h27" stroke-dasharray="458,458" stroke-dashoffset="458">
<animate id="an_offset2"
attributeName="stroke-dashoffset"
begin="0s"
dur="3s"
values="458;916;916;1374"
fill="freeze"
repeatCount="indefinite" />
</path>
</svg>
Additional example
  Drawing from each line from its midpoint
To implement the animation, change the parameters of the stroke-dasharray attribute
With a total line length of 496px, half of it is` 248px
since the values of the parameters in order mean:
0 - line, 248 - space 0 - line, 248 - space.
Therefore, writing stroke-dasharray = "0,248 0,248" will completely hide the line
With stroke-dasharray = "0,0 496,0" the line will be fully visible.
svg {
position: absolute; top: 50%; left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 150px;
}
.cls-1,
.cls-2 {
fill:none;
stroke:#a9a9a9;
stroke-linejoin:round;
stroke-width:10px;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200.17 135">
<path class="cls-1 " d="M132.67,28.44a39.06,39.06,0,0,1,0,78.12H113.22V59.11A54.11,54.11,0,0,0,5,59.11v57.35a13.54,13.54,0,0,0,27.08,0v-9.9h27" stroke-dasharray="496,496" stroke-dashoffset="496">
<animate id="an_array"
attributeName="stroke-dasharray"
begin="0s"
dur="4s"
values="0,248 0,248;0,0 496,0;0,0 496,0;0,248 0,248"
fill="freeze"
repeatCount="indefinite" />
</path>
<path class="cls-2" d="M113.63,5h19a62.5,62.5,0,0,1,0,125H102.44a16.29,16.29,0,0,1-16.3-16.29V59.11a27,27,0,0,0-54.06,0V79.89h27" stroke-dasharray="458,458" stroke-dashoffset="458">
<animate id="an_array2"
attributeName="stroke-dasharray"
begin="0s"
dur="4s"
values="0,229 0,229;0,0 458,0;0,0 458,0;0,229 0,229"
fill="freeze"
repeatCount="indefinite" />
</path>

Answer 2

As mentioned by #RobertLongson, it's a Safari bug where is does not support negative values for stroke-dashiffset