iOS 8 Safari: Rotation broken

[dreigenannt]

I have a simple 3d rotation to begin a proof of concept. It's working everywhere except iOS8.1 Safari.

 

Of course, the PEN i attached works in the browser.... but on the page itself, the star flashes and disappears.

Pen:

Page: http://staging-u01.fahlgrendigital.com/greensock/

• The pen and page are using the same version of jQuery
• GSAP files are loaded from CDN, so they are the latest version
• I installed the webkit and z-index fixes that I read in other forum posts
• The code in the pen is identical to the code in the page, except for other commented-out stars in the page (The page did the same thing when all stars were activated; I disabled them to simplify the code for troubleshooting)
• I've tried rotating the wrapper container rather than the star container; it was no different
• The page is working in other iOS browsers, in desktop Safari, and in Android browsers

Am I missing something completely obvious?

See the Pen QwWOvP by dreigenannt (@dreigenannt) on CodePen.

[GreenSock]

It looks like iOS Safari just doesn't support 3D transforms on images that have an SVG as the src. It is unrelated to GSAP as far as I can tell. 2D transforms are fine, FYI. This is a browser bug/limitation. 

 

I'd suggest switching to inline SVG instead of an <img>. 

[Jonathan]

Since IOS Safari has that bug/limitation, could you use a SVG file in a CSS background-image property instead of an <img> tag src:

:

<div style="background-image:url(http://staging-u01.fahlgrendigital.com/greensock/img/star.svg); width:100px; height:100px;"/></div>

:

Example of using a div tag and a SVG file in the background-image CSS property, instead of an img tag:

 

(view in IOS Safari) :

See the Pen xbxyJK by jonathan (@jonathan) on CodePen.

 

Does it animate using 3D transforms if it is a <div> tag using a CSS background-image on IOS Safari?

 

I don't have IOS Safari to test on.. I was wondering if that would work instead?

 

[dreigenannt]

Finally I got it. Thanks, both of you.

 

I had to use inline SVG AND put the CSS transforms on the OUTERMOST parent (one level up from where they were).

 

For anyone searching for an answer to this, here's another pen with the code that works:

See the Pen JojVvB by dreigenannt (@dreigenannt) on CodePen.