Jump to content
Search Community

3D transform issue in GSAP/1.16.1, when rotationY/X applied to inner SVG elements

Dima-L test
Moderator Tag

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, 

 

Can you help me to explain the reason why rotationX or rotationY 3D transforms are not applied to children elements of SVG (rect, circ)? This issue manifests itself only in Safari (Mac Safari version 8.0.5 (10600.5.17)) and Mobile Safari (iOS 8.3)  AND only in GSAP TweenMax.js version 1.16.1 (linked from CDN or locally).

 

View this Codepen example in Safari: – notice the linked cdn js file (//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js)

 

Here is an identical code where rotationY/X 3D transforms ARE applied: – the only difference from above is that here linked TweenMax.min.js is version 1.14.2

 

Is this in fact an issue with TweenMax.js 1.16.1 or is my setup wrong?

 

See the Pen ZGGKqz by Dima-L (@Dima-L) on CodePen

Link to comment
Share on other sites

The official SVG spec doesn't actually support 3D transforms at all, so I wouldn't recommend applying them. Some browsers have partial support, but I really wouldn't count on it. This isn't a GSAP limitation - it's simply a browser/spec issue. 

 

Safari had some bugs (again, the browser, not GSAP) related to when the transforms were applied via CSS instead of the transform attribute. So we switched to setting transforms via the attribute by default which is the most consistent way to do it anyway across browsers. The transform attribute definitely doesn't support any 3D stuff. 

 

Technically, you can get back to the old behavior by setting the undocumented CSSPlugin.useSVGTransformAttr = false; (that's a one-time setting). That'll allow them to be pushed into the CSS style instead of the transform attribute, but again, the tradeoff is that Safari has some rendering quirks with that in certain rather uncommon scenarios. And of course even if you get the 3D stuff working in Safari and Chrome, IE and Opera certainly won't honor those. So my recommendation would be to avoid doing 3D in SVG since the spec doesn't really support it anyway. I wish I had better news for you. 

  • Like 3
Link to comment
Share on other sites

  • 5 months later...

I'm running into the same issue as Dima - using an older version of TweenMax works with 3D transforms on svg elements - the more recent versions, including 1.18, end up breaking the page from rendering.

 

Check out this pen with gsap 1.14 (same as Dima) - works as expected in Safari and Chrome: 

See the Pen KdQKpr by johnmastri (@johnmastri) on CodePen

 

This pen uses the same code, but gsap 1.18 instead - totally breaks in Safari: 

See the Pen avqzbW by johnmastri (@johnmastri) on CodePen

 

Is there a change between the versions in regards to 3d transforms on svg elements?  Maybe an optional flag we have to set to enable 3D transforms on SVG now? (i.e., force3D:true, etc)  Any ideas on how to re-implement this without resorting back to an older version of asap?

 

Thanks!

Link to comment
Share on other sites

Ah yes, as explained above, the SVG spec itself doesn't support 3D. Plus Safari has some rendering bugs when CSS transforms are used which is why we just switched to using the transform attribute instead which is the most consistent way across all browsers. So again, you're not supposed to be able to do 3D in SVG - Webkit is "breaking the rules" in a sense. 

 

As explained above, you can get the old behavior by setting CSSPlugin.useSVGTransformAttr = false but I wouldn't recommend it. 

 

I slightly concerned that perhaps I'm missing something in your question because I already said pretty much all of this in the post right above your question, so I assume you read that and still had a question that I didn't address but I'm struggling to see that. Did I miss something? 

  • Like 1
Link to comment
Share on other sites

Just to chime in here Dima-L and vanillabass.

 

As Jack said the SVG spec does not support 3D. In your codepen you are applying transformPerspective. Perspective and transformPerspective requires z-axis to work. But again SVG does not support 3D transforms, even though like Jack said Safari / Chrome webkit allows it in some instances, which goes against the spec. Safari and Chrome will sometimes allow non-spec behavior for developers, and then remove that illegal behavior to align itself with the spec. WebKit based like Chrome and Safari browsers are known to just add features for developers. But are not meant for production, for example on Windows 7 64-bit your example above isn't working for 3D on SVG elements. Since Firefox is good at respecting the spec.

 

But in order to maintain cross browser consistency. It is better to not even attempt 3D on SVG elements, since doing so will give you problems like you are experiencing now for the reasons Jack mentioned above. :)

  • Like 3
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.
×
×
  • Create New...