Compatibily problem with ipad and/or IOS

[BennyBatta]

Hello.

I'm new in the forum, and quite new to GSAP, too.

Recently, I put in production a website. In the home page is included a countdown animated with GSAP.

This is the link: http://www.progettoborgogni.it

It works great on PC and on mobile, but I found problems with an ipad. I really can't find the problem.

To solve, I tried to changed the libraries' relases with the newest I found, like this:

      <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

But I can't see any difference: the error is still there.

The animation is quite simple, it is inside a JS function, with this method:

  animateFigure: function (elem, value) {

        let that = this,
           top = elem.querySelectorAll('.top')[0],
           bottom = elem.querySelectorAll('.bottom')[0],
           backTop = elem.querySelectorAll('.top-back')[0],
           backBottom = elem.querySelectorAll('.bottom-back')[0];

        // Before we begin, change the back value
        backTop.querySelectorAll('span')[0].innerText = value;

        // Also change the back bottom value
        backBottom.querySelectorAll('span')[0].innerText = value;

        // Then animate
        gsap.to(top, 0.8, {
          rotationX: '-180deg',
          transformPerspective: 300,
          ease: Quart.easeOut,
          onComplete: function () {
            top.innerText = value;
            bottom.innerText = value;
            gsap.set(top, { rotationX: 0 });
          },
        });

        gsap.to(backTop, 0.8, {
          rotationX: 0,
          transformPerspective: 300,
  	      ease: Quart.easeOut,
          clearProps: 'all',
        });
      },

Is there someone who's able to explain me what's going on?

Thanks in advance.

[Rodrigo]

Hi @BennyBatta and welcome to the GSAP Forums!

 

Unfortunately there is not a lot we can do without a minimal demo, a live site doesn't give us the opportunity to edit the code and see what could be the issue.

 

If possible setup a minimal demo forking this:

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!

[GreenSock]

Yeah, it's almost impossible to troubleshoot without a minimal demo, but I bet this has nothing to do with GSAP. Keep in mind that Safari handles stacking order on 3D elements differently than all other browsers. It's as if they combine z-index and z placement on the 3D axis. My suggestion would be to eliminate GSAP from the equation and just set the values directly (no animation) and see if it displays the way you'd expect. You may need to move things on the z-axis in order to get them to stack properly. If you still need help, please post a minimal demo. 

[BennyBatta]

Well, I thought to setup a codepen, but in my opinion it shouldn't give the idea: I mean, it could be not useful to understand the problem, because on PC and on mobile it works great (the difference has evidence on the supports only). I haven't actually checked how it works and/or what happens on an Iphone, but for sure on Ipad the problem is present. Also it seems to be OK on a normal Mac, but I just made a fast check and I'd have to go deeper in this.

Anyway, in this case a demo  doesn't give any support to understand the problem.

In theory I should have to try the debugging on a Mac, but I don't have it available. I was just hoping someone could help me.
Regarding the code, I don't think it can depend on anything other than compatibility, because the code outside of GSAP is quite simple, and uses standard functions and operations.

[Rodrigo]

Hi

 

What countdown? Where exactly on the page? This is not a short site.

 

I just checked this on an iPad running iOS 17 on both chrome and safari and it works basically in the same way it does on my desktop (Ubuntu 22) on chrome and firefox 🤷‍♂️

 

More details would help, but again without a demo there is not a lot we can do TBH, we can't see the JS that leads to this, we can't see if the CSS is doing something or not, we can't see if the HTML structure is the cause or not, etc. That's why we ask for a minimal demo (emphasis on minimal) that allows us to tinker with all those elements. Normally that helps us find the problems faster and easiser.

 

Happy Tweening!

[BennyBatta]

Hi, Rodrigo.

So, just to understand if you can see the problem or not: if you look in the home page (but also in the page called "Il progetto"), there's a section called "Le fasi complessive" where there are 3 data references, with the first colored in blue changing second by second in a moving countdown, while the other two are colored in orage signing the beginning of the next phases of the project.

On PC the 3 data references work correctly. So if you can't find them looking on a Mac, it means that the problem is there. In the attached image you can see a live example, a screenshot taken on a PC 5 minutes ago.

[Rodrigo]

Hi,

 

I just checked on my iPad (iOS 17) and is working exactly in the same way it does on my desktop running Ubuntu 22:

https://i.imgur.com/X068JfO.mp4

 

I'm seeing exactly that on Chrome and Safari so I can't seem to replicate the issue, sorry.

 

Happy Tweening!

[GreenSock]

Like @Rodrigo, I don't understand what you're seeing - I can see those countdown sections on both my Mac and my iPhone. Maybe I'm missing something obvious. 🤷‍♂️

[BennyBatta]

Sorry, but I have only a 2014 iPad air 2 avaiable. The IOS version is 15.8.1. And there I can see the error. 

Good news knowing that on newer supports it works correctly.

My problem with this iPad consists also in the fact that I don't know how to debug (I think is impossible directly on the iPad).

For sure JS is working well, because some functions act correctly (but not all of them evidently).

Anyway, I can consider that the error is limited only to some support, and is not generelized to the Mac system. I'm trying to learn more about this.

Thanks for your answer, for now.

[BennyBatta]

Ok, I've overcome the problen, and find a solution!

GSAP has nothing to do with it, it has no compatibility defects, as someone suggested. The problem is due to a bug in Safari, that till a certain release (which one I don't know, by the way): the broiwser doesn't support the data format "yyyy-mm-dd". So I fixed with a simple regex replace, like this: 

dateString = dateString.replace(/-/g, '/')

So, I apologize for bothering you unnecessarily (in fact, GSAP has no problems). I've included the solution in case anyone else encounters this error.

Thanks again.

[Rodrigo]

Hi,

 

Is great to hear that you were able to solve this. Yeah some of this issues in Safari are really mind boggling 😵‍💫

 

Finally thanks for sharing your solution with the community, I'm sure many users will benefit from your generosity and insight 💚

 

Happy Tweening!