AOS causing horizontal scroll bar to appear

[nom3d]

This is:

• Bug
• Feature request
• Question
• Idea

Specifications

• AOS version:2.3.4
• OS:win7
• Browser:firefox

Expected Behavior

No horizontal scrollbar

Actual Behavior

AOS causing horizontal scroll bar to appear when browser window is sized under 1000px or so.. seems to happen on the data-aos="fade-right" and data-aos="fade-left". When the container is say 800px wide and the browser is around 850-900 a horizontal scrollbar will appear until you scroll down and the effect is done.

Steps to Reproduce the Problem

1. 2. 3.

Detailed Description

Possible Solution

[sGentiletti]

overflow: hidden; for that container, and we can wait for the fix.

[BuRTaRT]

Yep,the same problem.

[jbator]

Same issue here. Usning bootstrap4 ".container-fluid" and rows with data-aos="fade-right" and data-aos="fade-left".

[aronmeszaros]

overflow: hidden; for that container, and we can wait for the fix.

or perhaps because fade-right and fade-left is the case, overflow-x: hidden; would be the best

[tomihbk]

Same problem.

[mzvarik]

This will never be fixed... this library should be erased and not used.

[antonyleme]

Not solved yet. I can't use overflow-x: hidden because the navbar goes out beyond the page

[jonasmarco]

Sadly, same problem here. I'd to use overflow-x:hidden on mobile to solve it.

[nicolaskeller]

overflow-x: hidden; on the body fixed it for me.

[CaioSilvaWeb]

I used overflow-x: hidden in the mother div and solved the problem, excellent library.

[siemlohuis]

Same for me on any size with text-align: center;

[juliebam]

I have this issue but only chrome and mobile. overflow-x:hidden doesn't seem to fix it. (its fine on firefox)

[Ariansdf]

overflow-x: hidden; on the body fixed it for me.

SAME HERE ! thanks ! that was a life saver !!! my div position is absolute, so it seems that the parent div overflow:hidden would not work ! (maybe ! not sure really why)

[AliHussain85]

And what about the shadow of elements that get's hide due to overflow:hidden of parent div?

[SaeedEsk]

header, section { width: 100%; float: left; overflow: hidden; }

[Ateyyah-Buthor]

Well, for me the overflow: hidden thing worked only on desktop view.. but on mobile, I fixed it with something similar... My whole HTML body is divided into sections..

That's what I put in my CSS file -=And worked fine on mobile=- : section { overflow:hidden; }

[volkandkaya]

Body never worked, using overflow hidden on section was perfect.

[Dulanka-K]

overflow-x: hidden; in body alone didn't fix. Had to include following meta tag too

meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1.0, user-scalable=no"

[edunwa302]

I used overflow-x: hidden in the mother div and solved the problem, excellent library.

works for me

[766kadir]

Firstly ı'm so sory for my bad lang. I've same problem. "overflow-x in aos". I many tried but ı finally find. I set css html, body max-width : 99%. In this way works it. Only loss %1 width. İf u dont worry for this, maybe u can use.

[MetalxD117]

overflow-x: hidden; in body alone didn't fix. Had to include following meta tag too

meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1.0, user-scalable=no"

This absolutely works for my problem, thanks bro!!!!

[ramapermadoni]

overflow: hidden; for that container, and we can wait for the fix.

thank you very much, it works

[Air-Sidney]

Or you can begin animation from another side xD

[San-tiago]

overflow-x: hidden; in body alone didn't fix. Had to include following meta tag too

meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1.0, user-scalable=no"

this works for me, thanks buddy

[Nwoye-Ezekiel]

overflow-x: hidden; in body alone didn't fix. Had to include following meta tag too

meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1.0, user-scalable=no"

Thank you so much! it worked.

[pkaustubh401]

overflow-x: hidden; in body alone didn't fix. Had to include following meta tag too

meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1.0, user-scalable=no"

This totally worked for me , only using overflow-x:hidden hides some elements of navbar so use the meta tag for complete working

[Hydrodamalis]

For this to work, add overflow: hidden to html.

html, body{ overflow: hidden}

[nooroffical]

.container { overflow: hidden; } add css only "container", not html or body. worked for me.

[snowiewdev]

i'm using vue with php, each page has a div with id=app, the following works for me:

body, #app { overflow-x: hidden; }

I guess it just needs to add a overflow-hidden class to a container that wraps around the elements with aos applied hope this helps

[jessedmatlock]

Unfortunate that this isn't resolved, still. I tried the meta name tag, no dice.. but, overflow-x: hidden on html and body resolved it. I've using a media query to only implement for mobile screens.

@media (max-width: 992px) { html, body { overflow-x: hidden !important; overflow-y: visible !important; } }

[mRahulRoy]

Not solved yet. I can't use overflow-x: hidden because the navbar goes out beyond the page

use overflow-x : hidden and this will solve your problem

[mRahulRoy]

use overflow-x : hidden and this will solve your problem

[syedahmedrz]

Perfect solution for that... recommended

[Farhan100X]

766kadir

Firstly ı'm so sory for my bad lang. I've same problem. "overflow-x in aos". I many tried but ı finally find. I set css html, body max-width : 99%. In this way works it. Only loss %1 width. İf u dont worry for this, maybe u can use.

Make it 99.9%. It solves the problem of AOS + you won't see any decrease in width. 766kadir Thanx

[romulis]

Overflow: hidden is great... unless you want to incorporate a css sticky element or have an element overlap another element, then not so great. overflow-x: clip works better than hidden and is compatible with css sticky element.

[Mos3aB696]

To Solve This Don't Use ( flip-up | flip-down | zoom out ) And Another Values Going Greate

[MozerBuce]

I got the same problem using slide and i tried to change many things on the layout and nothing, for now i using this: overflow-x: hidden;

[issam-seghir]

overflow-x: hidden; for the parent div fix the problem

[tutods]

For me the meta tag doesn't work.

[issatillie]

Same issue here. Tried applying it to the body, no changes, to HTML & BODY, just made it literally impossible to scroll down on smaller devices, I literally could not scroll down. If I could, the AOS animations wouldn't play. It's terrible that this issue has been around since 2018! That's crazy.. even applying it to the containers didn't help, couldn't scroll down on smaller devices.

[shreygargofficial]

Hey Guys!!! I have fixed the issue for me just replaced zoom-out with zoom-in as zoom-out initially takes the space more than the parent container hope this would help

[fabiviegas]

I used overflow-x: hidden in the mother div and solved the problem, excellent library.

thanks bro!

[tutods]

Anyone having issues on Next.js? Like: Warning: PropclassNamedid not match. Server: "text-4xl font-bold tracking-tight text-white sm:text-6xl aos-init aos-animate" Client: "text-4xl font-bold tracking-tight text-white sm:text-6xl"

[V4LKYR13101]

overflow-x: hidden; in body alone didn't fix. Had to include following meta tag too

meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1.0, user-scalable=no"

This is the full answer. overflow-x: hidden and the additional viewport section. Thank you Dulanka-K

[elielson-and]

✅Solved.

im using tailwind, so i just passed overflow-x-hidden on the main component (entire app), however if it doesn't work for your case. you can try adding it to the body instead of the main component. Additionaly to force it you can try: !important:

css: overflow: hidden !important;

[Sivayogeith]

overflow: hidden;

needed this, and the workaround works amazingly! i was about to give up lol.