Horizontal Scrollbar Appear When using Fade-right or left

[Angwyn]

This is:

• Bug

Specifications

• AOS version: 2 and above
• OS: Windows 7, Android
• Browser: Chrome

Expected Behavior

There is no horizontal scrollbar

Actual Behavior

When i'm using data-aos="fade-right" or data-aos="fade-left". It can made my website be scroll horizontally when I'm test it on my phone. I'm already using overflow:hidden; But it's not working. This is my code:

<div class="image" data-aos="fade-right" style="overflow: hidden;">
<img src="image.png" width=80% style="z-index: -1;">
<div class="txtonimg">This Is Image</div>
<a href="pastry.php" class="discover">Discover More ></a>
</div>

Steps to Reproduce the Problem

Detailed Description

Possible Solution

[petomuro]

Hey @TheFoxieDev,

as was mentioned in #73, try to add overflow-x: hidden; to some of parent elements. This solution works for me, but maybe won't work for you.

In my case horizontal scrollbar appears when I use data-aos="fade-left" not fade-right. You can try below example. Maybe it helps you to solve your problem.

<div style="overflow: hidden;"> // Parent element
  <div class="image" data-aos="fade-right">
    <img src="image.png" width=80% style="z-index: -1;">

    <div class="txtonimg">This Is Image</div>

    <a href="pastry.php" class="discover">Discover More ></a>
  </div>
</div>

[Angwyn]

Hey @petomuro, Thanks for the answer, it worked. Thank you so much ❤️

[petomuro]

@TheFoxieDev You are welcome 😊.