Animations not working on iPhone 11 (iOS 14.6) - How can I fix?

[noserutan]

This is:

• Question

Specifications

• AOS version: 2.3.1
• OS: iOS 14.6
• Browser: Safari

Expected Behavior

Smooth animations on device.

Actual Behavior

Animation of AOS not work. But some case still work:

• Animations by @keyframes
• Animations by GSAP

Steps to Reproduce the Problem

1. Access to homepage to see the

Detailed Description

This bug not happen for all devices, so please watch the video for more details. If some one know how to fix it, please help me. Thank you!

https://user-images.githubusercontent.com/75997694/122717026-3bca3600-d295-11eb-9fcd-391c185fcad7.mp4

[omokhov]

Hi. The same problem on Chrome for iOS (14.6). Also interesting to get a solution

[lemonxtt]

It works on my Iphone 11 pro with iOS 14.5

[MikeyJN]

I use AOS on my site, but don't have an iPhone to try it on, so I got my friend to try it on his 11 yesterday with IOS 14.6 and it worked fine (he sent me a screen capture). I also have a friend with a 12 (Mini) and I tried it on her phone today myself both on Safari & Google and confirm it was working perfectly.

[xamous]

I'm experiencing this issue, too, on iPhone 12/iOS 14.6. It happens randomly, terminate (swipe out) browser and restart will fix the issue.

[jakubm95]

@michalsnik I have the same problem. All animations on new iOS don't work.

[fescti]

I also have animation smooth problem. AOS works perfect on pc and android device, but on ios animations have problems. In the video attached seems less laggy than in the real user experience. Someone knows how to solve the last laggy part of the animation? thx https://user-images.githubusercontent.com/65332851/128543558-a95bf678-b23d-4cb3-9284-8e8dc853320c.mp4

[MikeyJN]

Out of interest, can you see the same issue here with this similar plug-in: https://scrollrevealjs.org/

[MikeyJN]

I tested the animations on the AOS homepage today using an iPhone 12 running the very latest iOS (version 14.7.1) and can confirm all animations were working perfectly and very smoothly.

[cmoleka]

On IOS 14.7.1 everything works as it should on Safari and Firefox. However, Chrome seems to have that issue.

[biju001]

same problem .. phone xs ios 14.7.1. google chrome not working but on safari it is working

[QasimArif]

Same problem with 14.7.1 for Chrome only.

Facing a similar issue with a transition on Chrome on a sidebar I just made with a toggle button. Works great in safari. However on Chrome if I switch tabs back and forth a few times, it becomes worse with each switch back.

Sounds like more a iOS issue than anything.

[unicornsoftwareinc]

Having the same issue on Chrome for iOS. On both my site and the demo page here. No issues with Safari. The pop in looks pretty bad on my site so I might have to remove this library for now.

[fguijarro]

Having the same issue. I've tried everything (using CSS animations) with no luck. Please if anyone knows of a solution let me know. Thanks.

[thomasender]

Facing similiar issue. CSS Animation works find in Chrome and Firefox but not in Safari Version 14.1.2. Tried all kinds of solutions found via Google, nothing works. Here is the code I want to get working. As already mentioned, tried all kinds of prefixes, splitting up the shorthand and even having different animation names for webkit and non-webkit. Would highly appreciate a solution for this.

` .marquee-effect { animation: leftright 5s 0.01s infinite alternate linear; }

@keyframes leftright { 0% { transform: translateX(0%); } 20% { transform: translateX(0%); } 80% { transform: ${p => p?.overflowDiff && translateX(-${p.overflowDiff}px)}; } 100% { transform: ${p => p?.overflowDiff && translateX(-${p.overflowDiff}px)}; } }`

[sharukhk08]

I have the same problem with aos version 2.3.4 On the first load of the page, the page appears white without any elements, but after I reload the page, everything works fine. This issue is found in iPhone 13 and 14 chrome browsers.

Help me with a solution if anyone has a solution, I would appreciate it. Thanks

[IndigoSoftwares21]

Hello Everyone, Unfortunately, the best way to fix the problem is by deactivating the animation on IOS. Use the below code to remove it

let elements = document.querySelectorAll('[data-aos]'); for (let i = 0; i < elements.length; i++) { //if ios remove the attribute if (/(iPad|iPhone|iPod)/g.test(navigator.userAgent)) { elements[i].removeAttribute('data-aos'); } }

or in JSX

useEffect (()=>{ let elements = document.querySelectorAll('[data-aos]'); for (let i = 0; i < elements.length; i++) { //if ios remove the attribute if (/(iPad|iPhone|iPod)/g.test(navigator.userAgent)) { elements[i].removeAttribute('data-aos'); } } })

[iabhishekraj]

Facing similiar issue. CSS Animation works find in Chrome and Firefox but not in Safari Version 14.1.2. Tried all kinds of solutions found via Google, nothing works. Here is the code I want to get working. As already mentioned, tried all kinds of prefixes, splitting up the shorthand and even having different animation names for webkit and non-webkit. Would highly appreciate a solution for this.

` .marquee-effect { animation: leftright 5s 0.01s infinite alternate linear; }

@Keyframes leftright { 0% { transform: translateX(0%); } 20% { transform: translateX(0%); } 80% { transform: ${p => p?.overflowDiff && translateX(-${p.overflowDiff}px)}; } 100% { transform: ${p => p?.overflowDiff && translateX(-${p.overflowDiff}px)}; } }`

@thomasender have you found any solution to your problem? I am facing the same problem. Please share your solution if you found any. Thanks in advance.