AOS causing whitespace **TRIED EVERYTHING**

[JMCreative97]

This is:

- Bug

Specifications

• AOS version: 3.0.0-beta.6
• OS: Windows 10
• Browser: Safari

Expected Behavior

Elements should animate without effecting screen size

Actual Behavior

White space is added to the write of the screen

Steps to Reproduce the Problem

1. Create any fade-right / fade-left elements on a mobile screen
2. Pinch scroll on mobile view

Detailed Description

I've tried every solution I've come across such as body,html {overflow-x:hidden}, making the parent divs overflow-x:hidden etc. and I'm having no luck. I've been on this issue for over a week now and I love this library and don't want to give up on it so can someone please help me fix this!! [ONLY OCCURES ON MOBILE VIEW]

https://alsipsoftware.web.app

Possible Solution

[madkot]

Same problem, page width is larger than viewport width / device width on mobile. Quick fix for it is to add overflow-x:hodden to parent elements.

[fahedusmanrana]

@JMCreative97 I have mentioned a solution which worked for me here https://github.com/michalsnik/aos/issues/646#issuecomment-803794602 I hope it will work for you.

[connermurphy]

When you say whitespace, do you mean the elements aren't showing at all or they are showing and causing increased spacing? If you can provide a demo link or a codepen that would help.

See this issue I had - #667

[Lorenzo-Care]

If you're using left - right animations adding overflow-x: hidden is not a solution, at least it did not work for me since elements kept being hidden. What worked for me was, instead of using:

html, body {
 width: 100%;
}

use:

html, body {
 width: 100vw;
}

[DevinCarpenter]

When you say whitespace, do you mean the elements aren't showing at all or they are showing and causing increased spacing? If you can provide a demo link or a codepen that would help.

See this issue I had - #667

I was having this same issue. There was a ~ 20% margin on the right hand side of the page. Wrapping all the elements of the page in a div with overflow-x: hidden solved the issue for me like you said after I had tried all the other solutions here.

[kenntheswe]

width:100vh & overflow-x:hidden didn't work for me, what can I do to use fade-left/ right?

OS: Windows 10 Browser: Chrome

[Lorenzo-Care]

width:100vh & overflow-x:hidden didn't work for me, what can I do to use fade-left/ right?

OS: Windows 10 Browser: Chrome

try removing the overflow-x: hidden and use only html, body { width:100vw; }

[an6re9]

I had the same problem. If I added overflow-x for the body or the main wrapper for all content, then the animations simply did not load. As a result, I applied overflow-x to the containers of my blocks that limit the width of the site and everything became normal.

[aguerowindah18]

i had the same problem, using your solution it worked. thanks

[gpwaob92679]

I tried this and it worked for me.

html, body {
  overflow-x: hidden;
  position: relative;
}

Neither width: 100% nor width: 100vw; was needed in my case. Maybe the issue has something to do with the position of ancestor elements(body or divs) and not just the width.

BTW, I used this for debugging.

.aos-init {
  opacity: 1 !important;
}

[TAMIRAT-FEREJA-T]

I solved it by adding this code html, body { overflow-x: hidden; position: relative; }

[Skeiceee]

I solved it by adding this code html, body { overflow-x: hidden; position: relative; }

This shit is good, but it's not really necessary to use position:relative it seems only with overflow-x:hidden it should work