Question: Header loop/rotationX not working correctly in iOS (both Safari and Chrome)

[Crash21]

Hi there,

I made a small demo from a part of my website to find the error.
It is a loop that loops through the headers and animates them on the rotationX axcis. The loop works on desktop OSX (Safari, Chrome and Firefox) but on on iPadPS and iPhone/iOS it's very buggy. I tested it in Safari and Chrome. Most of the time the first loop through the items doesnt work and after that it does. But not always ;-). It seems the initial position is not correct, but I tried adding different css lines but no luck. Does anyone have an idea on what I need to change?

See the Pen ZYzWXwz by Crash-21 (@Crash-21) on CodePen.

[mvaneijgen]

Hi @Crash21 welcome to the forum!

 

Check out this clever tutorial by our own @Carl this should work in any browser. Hope it helps and happy tweening! 

 

 

[Crash21]

Hi MVanEijgen,

Thank you for you reply. But sadly this is not my issue, the loop is working ok. The issue I'm having is with the rotation X on Safari and Chrome on iOS and iPad OS. If you look at the pen on a iPhone you see the problem.

Kind regards,
Crash21

[mvaneijgen]

Well I do think this will solve your issue. What I think is happening is that certain tweens overlap their logic which make it so the animation bugs out because two tweens are fighting for control of the same property. The clever solution above negates this issue and thus will solve your problem.

 

Again hope it helps and happy tweening!