Some animations not working on apple devices

michalsnik / aos

Animate on scroll library

MIT License

26.47k stars 2.57k forks source link

Some animations not working on apple devices #413

Open ErikRobles opened 5 years ago

ErikRobles commented 5 years ago

Flip animations not working on apple devices.

This is:

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

This issue can be seen even on the AOS JS website flip demo. https://michalsnik.github.io/aos/
I am experiencing the same issue on my site: http://lionsfield.com/wp/about-us/

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 commented 5 years ago

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 commented 5 years ago

Has anyone found a resolution to? :)

JNaeemGitonga commented 5 years ago

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

damky commented 5 years ago

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

BenQuirk commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

SeaYJ commented 7 months ago

我注意到翻转元素的一半在（z-index？）其他元素上方可见，简而言之，这是在苹果设备上。

me,too