Aos: View port Bug on Mobile/Tablets

[AgileFlexAgency]

While the plugin works fine on PC browsers when it comes to mobile it's buggy.
On mobile/tablets after scrolling down to see the AOS effects on view there is a horizontal bar appearing - and you can drag the website left or right and the UI layout breaks.

I've tested on iPhone 7 Safari & iPad Safari.

[AgileFlexAgency]

@michalsnik

AOS UI FIX #156

01. The first selector CSS is not needed when Bootstrap 4 is used
02. The second CSS selector fixes the horizontal bar created on the container while animations are in place - on phones and tablets the site layout would break

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.aos-all {
max-width: 100% !important;
width: 100% !important;
width: 100vw !important;
overflow: hidden;
margin: 0;
}

[colingourlay]

Here's a wee something I've just release that might help out: https://github.com/colingourlay/root-units

[michalsnik]

I think we already agreed somewhere else that it's not necessarily issue in AOS itself. It's just how horizontal transform works, and that there should be overflow-x: hidden on parent container or body. I'll put this simple solution in the upcoming FAQ.

[kangadi190]

How to fix it?
Before loading the navbar isn't responsive.

[thexmanxyz]

@michalsnik The overflow-x: hidden; was a great hint for fixing navigation related issues on mobile (e.g. sticky navbar fixed-top in BS4). Big thanks!