3D transform issue in GSAP/1.16.1, when rotationY/X applied to inner SVG elements
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
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 any
