Jump to content
GreenSock

railway

SVG Safari transition bug

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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. 
  • Like 3
Link to comment
Share on other sites

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 ?
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 ?
 
Link to comment
Share on other sites

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.
  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×