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

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; } }