Aos: Some animations not working on apple devices

[ErikRobles]

Flip animations not working on apple devices.

This is:

• Bug

Specifications

• AOS version: 2.3.4
• OS: apple devices
• Browser: Any on Apple device, iphone, ipad etc.

Expected Behavior

Animated element should be hidden until scroll event

Actual Behavior

Element is visible and flipped a bit past its complete sideways position

Steps to Reproduce the Problem

1. This issue can be seen even on the AOS JS website flip demo. https://michalsnik.github.io/aos/

1. I am experiencing the same issue on my site: http://lionsfield.com/wp/about-us/

3.

Detailed Description

It would be nice to at least add a sequential fade in before flip to initially hide the element briefly while flipping into view

Possible Solution

[ErikRobles]

Supplement to the issue #413, I wanted to post the initial state vs. the final state on the iPhone, iPad, iPad mini etc.
Before reaching the scroll point, you can see the image flipped sideways and a little beyond.

The animation then moves to the complete sideways hidden position and then reveals itself as seen in this image.

This only happens in Apple devices as Chrome, Firefox, Edge and Opera are rendering it just fine. Safari... Well, safari doesn't know how to render the animations nor anything else for that matter.

[mileswalker91]

Has anyone found a resolution to? :)

[JNaeemGitonga]

fade-up isn't working as expected on iOS either.

[damky]

I've noticed half the of the flipped element is visible above (z-index?) other elements, briefly, and this is on apple devices.

[BenQuirk]

I'm having the same issue using 'flip-left' and 'flip-right'. My workaround is unfortunately to just use another class that doesn't have the same issue, 'fade-left' or 'fade-right'.

[damky]

for our flip-left/flip-right workaround, we found that if the parent div was set to position:relative;, and had a z-index: -1; then it worked properly. Sometimes we also needed overflow:auto;

[Odialko]

I had the same problem and I found solution by this link