search

michalsnik / aos

Animate on scroll library
MIT License
26.78k stars 2.59k forks source link

Animations not working on Mobile - the DIV disappears #502

Open fullblownstudio opened 5 years ago

fullblownstudio commented 5 years ago

This is: Bug

Specifications

Expected Behavior

Any DIV with class="aos-animation" should not disappear when the browser window is less than 990px wide. Animations should also work on Mobile.

Actual Behavior

Any DIV with class="aos-animation" is disappearing when the browser window is less than 990px wide. Animations are also frozen on Mobile and some DIVs are gone.

Steps to Reproduce the Problem

Animations work great if browser window more than 990px wide...

  1. http://dev.bdpradio.com/ (make window less than 990px wide, scroll down)
  2. http://dev.bdpradio.com/imaging/ (make window less than 990px wide, scroll down)
  3. http://dev.bdpradio.com/jingles/ (make window less than 990px wide, scroll down)
  4. http://dev.bdpradio.com/voiceover/ (make window less than 990px wide, scroll down)
  5. http://dev.bdpradio.com/commercial-music/ (make window less than 990px wide, scroll down)

Detailed Description

I am loading some content via AJAX, could that be the problem? But it works fine when browser is wider than 990px. I'm also using Bootstrap v3.3.7.

I am using the following JS: AOS.init(); (works on desktop)

I have tried these alternatives: AOS.init({ startEvent: 'load' }); // breaks desktop & mobile

window.addEventListener('load', AOS.refresh);  // doesn't help

Possible Solution

No idea. Thanks for your help!

fullblownstudio commented 5 years ago

990px seems to be when the MegaMenu converts to Mobile. Could there be a conflict?

fullblownstudio commented 5 years ago

Yes, there seems to be a conflict in one of these CSS files.

http://dev.bdpradio.com/webslidex/webslidemenu_layout4/webslidemenu.css http://dev.bdpradio.com/webslidex/webslidemenu_layout4/color-skins/white-gry.css http://dev.bdpradio.com/webslidex/webslidemenu_layout4/dropdown-effects/fade-down.css

fullblownstudio commented 5 years ago

The DIVS disappearing might have to do with this CSS (below) found in http://dev.bdpradio.com/webslidex/webslidemenu_layout4/webslidemenu.css

However, removing that doesn't fix the Animations on Mobile iOS, iPhone XS/Chrome Browser. Here's a screenshot of the frozen animations. http://dev.bdpradio.com/images/iphone-aos.jpg

/ ================== Mobile Menu Change Break Point ================== / @media only screen and (max-width: 991px) {

/ ================== Mobile Base CSS ================== / html { overflow: hidden; height: 100%; -webkit-overflow-scrolling: touch; }

body { height: 100%; overflow-y: auto; overflow-x: hidden; }

}