SVG Safari transition bug

[railway]

Hi there, 

 

I have a SVG animation with transitons on my svg groups. This works in both chrome and opera, but in safari the transform won't change. Codepen url here: . Any fix?

See the Pen vKNoZg by helle_railway (@helle_railway) on CodePen

[GreenSock]

I noticed a few issues:

1. You're applying transforms both in the CSS and in JS. Transforms on SVGs are especially tricky to do in a cross-browser way and I strongly recommend just applying them with GSAP because it solves pretty much all of those issues. In this case, the major problem is that Safari prioritizes CSS transforms over the transform attribute, whereas other browsers are the opposite. By default, GSAP applies its transforms on SVG elements to the "transform" attribute (not the CSS style) because it's the most reliable. Safari has several bugs, for example, if you apply them in the CSS (like z-index rendering can get all funky). But since GSAP was applying them in the transform attribute, and you had competing transforms in the CSS, Safari was completely ignoring the transform attribute in favor of the CSS stuff. Again, if you just do all your transforms via GSAP, you won't have any of these issues. 
2. In your CSS, you had prefixed versions AFTER the regular (non-prefixed) version - it's best to invert that. It wasn't causing an issue here, but I wanted to mention it. 
3. Be careful about applying CSS transitions to the same elements you're animating with GSAP, as they can conflict. It wasn't causing the problem here, but I figured I'd mention it. 

[railway]

Hi again, 

 

thank you so much! Fixed my issue. I was just wondering if you could elaborate on what by meant by point nr 2?

I was just wondering if you could elaborate on what you meant by point No. 2 ?

U I was just wondering if you could elaborate on what you meant by point No. 2 ?

 

I was just wondering if you could elaborate on what you meant by point No. 2 ?

 

I was just wondering if you could elaborate on what you meant by point No. 2 ?

 

[Carl]

This is a great article about prefixed CSS properties: https://bitsofco.de/css-vendor-prefixes/

 

a little snippet from the article:

 

How do we use them?

 

The proper way to use vendor-prefixed properties is to place them before the unprefixed property.

CSS
.example {
  -webkit-animation-name: slidein;
  -o-animation-name: slidein;
  -ms-animation-name: slidein;
  -moz-animation-name: slidein;
  animation-name: slidein;
}

We do this to take advantage of the cascading nature of CSS. Browsers will use the last declared version of a property they can understand. By putting the unprefixed version last, we ensure that, when browsers eventually support the official property, that is what they will use.