Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
JoeHetfield

3d transform not working in iOS safari

Go to solution Solved by GreenSock,

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

Hello, everyone.

 

I'm very new to gsap, and I create a small 3d rotationY animation in my web site.

Everything goes fine until I view the page using IPhone safari (with latest iOS 8).

 

The rotation effect was gone and the animated element (group of img) are just "jump out" to the screen.

 

I also used the mobile chrome to check it, and it's OK. and seems only mobile safari not working.

 

Did I missed something? 

 

any idea is welcomed, thanks in advance.

Link to comment
Share on other sites

Hi! Try version 1.14.0 of GSAP instead of latest 1.15.0. I noticed the similar problem with svg 3D-transform in Firefox lately and found that with earlier versions of GSAP everything is working fine. I'm prepairing the bug report at the moment.

Link to comment
Share on other sites

  • 3 weeks later...

I'm so sorry for take this long time to provide more information.

I tried to figure it out by myself, but I just can't.

 

here is the CodePen: 

See the Pen pvWNdg by anon (@anon) on CodePen

 

It's very simple, and works well both on desktop and mobile safari. but here is the problem:

 

  1. In the CodePen, I clicked "share" and then "export .zip".
  2. I extracted the html and javascript from the zip.
  3. I put those two files in my web server just as it is.
  4. open the html from mobile safari.

then the same thing happened, the four pictures just jump out without animation.

the downloaded zip file should exactly the same as the code in CodePen. but why it work in CodePen but not my local server?

 

This is drive me crazy. maybe just my dumb, but please help.

Link to comment
Share on other sites

Do you have any Console's error on other browsers !?

 

and pls use transformPerspective instead of perspective

TweenMax.set($('.thumbnails'), {transformPerspective: 200});
TweenMax.staggerFrom($('.thumbnails'), 1, {rotationY: 90,autoAlpha: 0}, 0.3);
  • Like 1
Link to comment
Share on other sites

Hi, Diaco. 

 

I checked with safari mobile web inspector, but no, no error on the browser console.

 

thanks.

Link to comment
Share on other sites

Hi Joe,

 

I took your codepen zip and placed it on our server and it works fine on iOS6

http://greensock.com/temp/3d/

 

Fine, in that it looks the same in desktop Chrome. 

perspective needs to be set on an elements parent, not the element that is being tweened, which is why Diaco suggested using transformPerspective.

 

What version of iOS are you using? Can you share a link your files on your server so we can test? 

Are you certain your index.js file is in the js FOLDER just as it is in the extracted zip?

 

http://prntscr.com/606vob

 

thanks

  • Like 2
Link to comment
Share on other sites

Hi,Carl

 

My iOS version is 8.1.3, the latest.

Thank you for the link, I tried it but the same problem remain.

 

I think it's not about server, but give me some time to setup a open server.

 

Yeah, I'm sure that the file is exactly same as codepen.

 

Thanks

Link to comment
Share on other sites

Hi Diaco,

 

I tried your code, use transformPerspective instead of perspective. 

 

The first image seems about to start the animation but it's quite flickering.

After rotate a little bit, the image disappeared completely. then "jumped out" on the screen.

the 2nd, 3rd and 4th image don't have any animation effect, still jumped out except they jumped out  with flickering.

 

much better than nothing, but I still can't show this to my customer  :oops:

 

btw, Carl, did you reproduce this ? I mean use the real IPhone with iOS 8.1.3?

 

Thanks

Link to comment
Share on other sites

  • Solution

This looks like it's unrelated to GSAP - it's a bug in iOS Safari that causes it to ignore 3D transforms unless you set a perspective on at least one ancestor element (like the parent). For example, set -webkit-perspective:800px on the <body> in your example and it works (at least on my iOS 8.1.3 device). 

 

You can remove GSAP from the equation and see that the exact same problem happens, so it's unrelated to GSAP. Pretty surprising that Apple let that bug slip through their QA. Wow. Luckily it's relatively easy to fix by adding a perspective to the parent. 

 

Does that help?

  • Like 4
Link to comment
Share on other sites

Hi, Carl

 

Thank you very much, it's worked! 

 

Apple really need to improve their browser, but the most iphone user I met are mainly using safari, they even don't know there is a better browser called chrome, I can't change this habit.

 

so, in my opinion, GSAP team should make a patch for this issue. or you may lost some user like my case.

 

one last thing I wonder: all the examples on GSAP home page are working good and well on my iOS 8.1.3. but the thing I made by hand like this are all broken. why? 

 

Thanks

Link to comment
Share on other sites

It works in most cases (like on our home page) simply because it's uncommon to use 3D effects without setting a perspective on the parent (or some ancestor element). It looks strange without any perspective. Since we set perspective on our home page, it works well. 

 

As far as patching it in GSAP, I don't think that's wise in this case because:

  1. Doing so would degrade performance due to all the extra work of going up the DOM tree looking for perspective, and only setting it if it's not found. 
  2. It's extremely uncommon to have developers apply 3D effects without a perspective on a parent/ancestor element. 
  3. We'd have to decide on a specific default perspective and apply it to a parent element, but the amount we choose may not be what the user likes. Should it be 800px? 400px? 2000px? 
  4. We really try to keep GSAP clean and have it honor the work of other developers. We don't want to get "grabby" or make a lot of assumptions about what the developer is trying to do. We want GSAP to be "safe" and not have developers worry, like "sometimes when I use GSAP for one element, it sets CSS properties on other elements and which causes problems with my other code." 

I think it's far better to, in the rare cases this comes up, simply tell the user to set a perspective on the parent. It's cleaner, simpler, and much more performant. See what I mean?

  • Like 1
Link to comment
Share on other sites

Hi, Carl

 

Yeah, I got what you mean. and learned a good lesson.

 

Thank you 

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