SVG animation struggles with Safari 13.1 (Mac OS & IOS)

Question

I just realized that the latest version of Safari (v13.1) that comes with macOs 10.15.4 and iOS 13.4 doesn't support css animations in SVG files anymore. I use this trick to display a loading animation on my portfolio. Now only the first frame of the sag file is display and the animation doesn't start. https://jbkaloya.com

No issues with Chrome or Firefox tho.

EDIT

Here's the corresponding CSS properties in where the file is embedded in the page

.loading {
  background-color: $black-color;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
  z-index: 1100;
  opacity: 1;
  transition: opacity .4s 0s cubic-bezier(.455,.03,.515,.955), z-index 0s 0s linear;
  
  &::before {
    content: '';
    background-image: url(../images/logoanimated.svg);
    background-position: center;
    background-repeat: no-repeat;
 position: absolute;
 display: flex;
 width: 100%;
 height: 100%;
 max-width: 22rem;
 margin: auto;
 left: 0;
 right: 0;
  }

I guess it can also be related to those properties (that are located in the svg file and that start the animation sequence)

    {
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1
      }

Am I the only one concern by this issue ?

Safari 13.1 changelog: https://developer.apple.com/documentation/safari_release_notes/safari_13_1_beta_release_notes

report a webkit bug to the webkit bugtracker with your testcase. — Robert Longson, Apr 01 '20 at 16:26
What are you talking about ? SMIL has not been supported for years ! — Mister Jojo, Apr 01 '20 at 16:30
@MisterJojo SMIL is supported in Firefox, Chrome and Safari. This question is however about CSS animation and not SMIL. — Robert Longson, Apr 01 '20 at 16:33
you are supposed to produce a minimal code illustrating your problem not an entire site with hundreds of lines of code to peel to understand what you are talking about — Mister Jojo, Apr 01 '20 at 16:37
@ MisterJojo That's true, thanks for your feedback. I've edited my post to make it more understandable — Jean-Baptiste Kaloya, Apr 01 '20 at 16:50
@RobertLongson Strangely this bug only occurs on the latest version of Safari(13.1) and not the rest of the webkit browsers. — Jean-Baptiste Kaloya, Apr 01 '20 at 16:57
Regardless you still [report it here](https://webkit.org/reporting-bugs/) — Robert Longson, Apr 01 '20 at 16:59
Did you end up reporting this? I can't seem to find it on their bugzilla, and I'd like to reference it. — V. Rubinetti, May 21 '20 at 18:47

score 8 · Accepted Answer · answered Apr 29 '20 at 00:55

8

I had a similar issue. To resolve, I utilized an object with type set to image/svg+xml.

<object type="image/svg+xml" data="animation/some.svg">

answered Apr 29 '20 at 00:55

Brandy

116
5

1

A huge thanks ! That worked perfectly. Do you know the technical reason ? – Jean-Baptiste Kaloya Apr 30 '20 at 08:27
@Jean-BaptisteKaloya I don't know what the specifics are, but there's some things that SVG images _aren't_ allowed to do when embedded with the `` tag. The one that I know about for sure is that they're not allowed to load things from external resources, e.g. webfonts. I'd say someone was working in this code on webkit and accidentally introduced a regression. – Fabian Tamp May 12 '20 at 07:21

score 1 · Answer 2 · answered Sep 19 '22 at 22:39

We ran into a similar issue with some svg animations not working in Safari

The solution ended up being to move all the <clipPath> nodes to the top of the <def> node, before the <animate> nodes that reference the clipPaths in their xlink:href

i.e. change this:

<def>
  <animate repeatCount="indefinite" dur="5.76s" begin="0s" xlink:href="#_R_G_L_1_C_0_P_0" fill="freeze" attributeName="d" attributeType="XML" from="..." keyTimes="..." keySplines="..." calcMode="spline"/>
  <clipPath id="_R_G_L_1_C_0">
    <path id="_R_G_L_1_C_0_P_0" fill-rule="nonzero"/>
  </clipPath>
  ...
</def>

to this:

<def>
  <clipPath id="_R_G_L_1_C_0">
    <path id="_R_G_L_1_C_0_P_0" fill-rule="nonzero"/>
  </clipPath>
  <animate repeatCount="indefinite" dur="5.76s" begin="0s" xlink:href="#_R_G_L_1_C_0_P_0" fill="freeze" attributeName="d" attributeType="XML" from="..." keyTimes="..." keySplines="..." calcMode="spline"/>
  ...
</def>

score 0 · Answer 3 · answered Oct 20 '20 at 10:16

0

I also had a similar issue on Safari and iOS. I solved it by using an <img> tag instead of in-lining the <svg> and applying a CSS animation to it.

answered Oct 20 '20 at 10:16

patrickzdb

928
1
10
26

SVG animation struggles with Safari 13.1 (Mac OS & IOS)

3 Answers3

Linked