Animations disappearing when having overflow-x: hidden on CSS

This is:

• Bug

Specifications

• AOS version: latest
• Browser: tested on Firefox, chrome

Expected Behaviour

Animations should fade in and stay there

Actual Behaviour

Animations fade in but are disappearing after animation is done

Steps to Reproduce the Problem

CSS to reproduce:

/* Google Chrome White space Bug */

html,
body {
  overflow-x: hidden;
}

Detailed Description

I use overflow-x: hidden to prevent the chrome smartphone bug and after changing some CSS out of desperation I got it working by deleting it.

Possible Solution

take out overflow-x: hidden when deploying

[Drewkan]

The fix is easy:

Create a div with the whole body content;

in css: body>div {overflow-x:hidden;}

You can see the fix working here: https://garciaesa.adv.br/

[robphillips]

For those using the following webkit scrollbar / media query workaround:

:root {
  overflow: hidden;
  height: 100%;
}

body {
  position: relative;
  overflow-y: scroll;
  height: 100%;
}

AOS v2 fork changes window scroll listener and variables to use document.body: https://github.com/imagex/aos/tree/v2 https://github.com/imagex/aos/commit/23e7b3d5583da6dfa1f564b8224cfd60d52cac39