Jump to content
Search Community

iOS 8 Safari: Rotation broken

dreigenannt test
Moderator Tag

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.


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

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

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