Jump to content
GreenSock

dreigenannt

iOS 8 Safari: Rotation broken

Go to solution Solved by dreigenannt,

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

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

Link to comment
Share on other sites

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>. 

  • Like 2
Link to comment
Share on other sites

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?

 

:)

Link to comment
Share on other sites

  • Solution

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

  • Like 1
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.
×