Getting a horizontal scrollbar due to AOS. When I set overflow-x: hidden, AOS stops working about aos HOT 8 OPEN

Hey Air-Sidney. Sadly that didn't work either. When I realized that it really was only affecting mobile browsers (not even my desktop chrome when I made the window really small) I figured it could have something to do with the viewport settings. I added:

maximum-scale=1.0, user-scalable=no

to the viewport meta setting, and now it works just fine.

Thanks for the help.

from aos.

I use now anime js instead of aos ... it works like a charme... soon it will release version 4.0

it got better support and more possibilities! :)

from aos.

Try to use overflow-x: hidden for sections

from aos.

Hi guys,
I have the same problem like @Lxxrxns .
On mobile I use effect slide in from down to right and from up to left.
If I use those effects I get a x scroll bar. This meta tag with maximum scale like @Lxxrxns does not solve the problem.
On your website on mobile is still a scrollbar visible. (on iPhone 12 Pro Max and even on chrome with mobile viewport)

Is there a right way to do this?
My website: https://danobe.dev

At the moment my website is missing the effects because I only have them in development and I don't want to push this code because of the scrollbar.

It only happens on mobile on desktop it works fine.

Has anyone an idea on how to solve this issue in a clean way? I'm not very satisfied at the moment with this library or maybe I'm to dumb to implement it in a correct way.

Would be happy for any hints!

Daniel

from aos.

I am also getting this horizontal scroll bar and, using it with Hubspot CMS for custom modules, it is interacting with Hubspot forms and making dropdown fields in forms disabled. Does anyone know why this would be having this effect? The issue with dropdown fields is only happening on pages where I'm getting this horizontal scroll bar with aos-fade on sections of the page.

from aos.

Hey Air-Sidney. Sadly that didn't work either. When I realized that it really was only affecting mobile browsers (not even my desktop chrome when I made the window really small) I figured it could have something to do with the viewport settings. I added:

maximum-scale=1.0, user-scalable=no

to the viewport meta setting, and now it works just fine.

Thanks for the help.
@Lxxrxns
What framework are you using?
I want to try this method out in nextjs any idea how to do it?

from aos.

Hey Air-Sidney. Sadly that didn't work either. When I realized that it really was only affecting mobile browsers (not even my desktop chrome when I made the window really small) I figured it could have something to do with the viewport settings. I added:

maximum-scale=1.0, user-scalable=no

to the viewport meta setting, and now it works just fine.

Thanks for the help.

thanks so much dude its working
for after i have added the meta tag configuration

from aos.

set overflow-x hidden on body and html tags.

Since it is only happening on mobile browsers, try to use this meta tag It prevents zooming in or out.

from aos.