Aos: Mobile format has an blank space added to the right outside of viewport after adding AOS

[djneill]

This is:

• Bug / - Question

  Specifications

  • AOS version: aos V 2.0
  • OS: Mobile format galaxy S8+, iPhone 8+, samsung galaxy tab
  • Browser: Chrome / Samsung internet browser

Expected Behavior

Pages were mobile responsive before using AOS

Actual Behavior

AOS is creating a blank space to the right of page of mobile devices. Laptop screens work as expected

Steps to Reproduce the Problem

http://dninstalls.com/

Possible Solution

Tried aos@next, did not fix.
Tried adding this to CSS / HTML did not fix
CSS
.aos-init:not(.aos-animate):after {
position: fixed;
}
HTML
< div class="aos-init" data-aos="zoom-in-up" data-aos-duration="3000" >

[ledones]

Hi there, I came here to search the exactly same problem haha

I used the CSS code above and indeed don't work, but when I tried to set overflow-x: hidden on the body tag, worked, the only thing is that the scrollbar still appears above the page. But I guess that's a beggining!

body{overflow-x: hidden}
.aos-init:not(.aos-animate):after {position: fixed;}

[djneill]

@ledones, when I set the body overflow-x to hidden all the content that has AOS features, is hidden.

[damnpradeep]

Hi ,
I had the same problem when I used this long back. It was a simple solution and it had nothing to do with editing CSS. If I remember correctly it was not ending the div or missing an ">". If I look at your website, when that sticky header appears, the website will not have white space on the right.

I believe, the problem is that you made a simple mistake in syntax. What you can do is remove all the occurrence of AOS and start by adding one section at a time. Find out where the problem starts. I will let you know if I remember exactly how i fixed the problem.

[djneill]

Thanks @damnpradeep the syntax is good but I was able to some what figure it out, some of the animations like zoom out where blowing the content out of the box until it was done animating and back to normal size. I changed some of the animations and no longer have the problem.

[lazehang]

I guess the css transform: translateX while using fade-right animation is also creating this issue. Any solution? Tried changing the position to fixed but doesn't work.

[djneill]

@lazehang There were three aos that were causing the problem, fade-up-right, fade-up-left, and zoom-in-up. The zoom-in-up was applied to an entire row with four columns, I am using the zoom-in-up on a single column row that is the title line with no problem.
I did try hiding the overflow on the X axis based on someone's recommendation but it caused all the aos elements to disappear.

[matteomelotti]

The same here.
I have a two section tags, the one below with a negative padding to give a nice effect and the aos is applied on this one.
Everything works fine if i set overflow-x: hidden but in this way i lose the section effect

[damnpradeep]

@djneill Yes, That was the problem. I remember now. I used the effect Fade from Right. Which was creating the issue. Later I used Fade from Down, which rectified the problem.

[michalsnik]

This is a known issue, and you got to solve it yourself by adding overflow-x: hidden on body or other parent container. I'll put this information in the FAQ section :)

If overflow hides your elements in a weird way it means you used floats and didn't use clearfix on the container.

[bobbyarcher]

For some reason using "overflow-x: hidden" on both body and html elements messed up my animations, causing some to not appear, so I've instead used the following jQuery to add "overflow: hidden" to all parents of animated elements, which seems to have done the trick:

$('[data-aos]').parent().addClass('hideOverflowOnMobile');

And then in CSS:

@media (max-width: 768px) {
.hideOverflowOnMobile {
overflow: hidden;
}
}

[tomihbk]

body{overflow-x: hidden}

Worked perfectly.

[mowens86]

Yessir, I can also attest to this. I had the exact same problem with extra white spacing to the right on mobile.

In the mobile @media queries just use the
body {
overflow-x: hidden
}

[lazehang]

Could you provide more info?

On Mon, 30 Mar 2020 at 5:17 PM, fabiosilvanet [e-mail]
wrote:

Hi,

I've the same problem. :-( I try use:

body {
overflow-x: hidden
}

But not solve the problem. Any idea? Thank you so much.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/michalsnik/aos/issues/390#issuecomment-605882170, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AEKS63DS73EHH2ZH4GT4GALRKBPR7ANCNFSM4FRUSRTQ
.

[mitchobrian]

This is a known issue, and you got to solve it yourself by adding overflow-x: hidden on body or other parent container. I'll put this information in the FAQ section :)

NOT or o not put it into the body section! Use the .container or .wrapper oder the #app or #root DIV's your page is using! That will work...

Das einzige was wirkt: overflow-x: hidden; in einen Übergeordneten Container einfügen!

[b1gh3ro]

For some reason using "overflow-x: hidden" on both body and html elements messed up my animations, causing some to not appear, so I've instead used the following jQuery to add "overflow: hidden" to all parents of animated elements, which seems to have done the trick:

$('[data-aos]').parent().addClass('hideOverflowOnMobile');

And then in CSS:

@media (max-width: 768px) {
.hideOverflowOnMobile {
overflow: hidden;
}
}

you my guy are a smart man

[HayfordEdward77]

For some reason using "overflow-x: hidden" on both body and html elements messed up my animations, causing some to not appear, so I've instead used the following jQuery to add "overflow: hidden" to all parents of animated elements, which seems to have done the trick:

$('[data-aos]').parent().addClass('hideOverflowOnMobile');

And then in CSS:

@media (max-width: 768px) {
.hideOverflowOnMobile {
overflow: hidden;
}
}

Your solution worked perfectly. Thanks