Aos: Animations do not work when HTML5 video element is on page, above animated elements

[hockey2112]

This is:

• Bug

Specifications

• AOS version: latest
• OS: windows
• Browser: firefox

Expected Behavior

Elements should animate regardless of other elements present on page.

Actual Behavior

Animations do not work when HTML5 video element is on page, above animated elements

Steps to Reproduce the Problem

1. Here is my video code. You can live edit/add it to the main AOS page (https://michalsnik.github.io/aos/) as a test.

<div class="video-wrapper">
    <div class="video">
       <video poster="/images/video.png" autoplay="" loop="" muted="" playsinline="">
           <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
       </video>
    </div>
</div>

1. If you place that video element near the top, the subsequent animated items will not animate.
2. If you place that video at the bottom of the page, the animated items above it will animate.

Detailed Description

Possible Solution

[hockey2112]

On further inspection and testing, it appears that the animations DO indeed work, but they are triggering too early... I assume because of the full width and result tall height of the video. How can we make sure that AOS takes into account the height of the video element in regards to when animations are being triggered?

[hockey2112]

I was able to "fix" the issue by giving the video element an absolute position, and then adding a 1600x900px transparent PNG in the same div to "stretch" the entire parent container.

[colepacak]

I ran into the same problem in safari - particularly mobile safari - and this helped me:

AOS.init();

window.addEventListener('load', function() {
  AOS.refresh();
});