search

jlmakes / scrollreveal

Animate elements as they scroll into view.
https://scrollrevealjs.org/
22.39k stars 2.26k forks source link

Not working when overflow-x:hidden #379

Closed tobsut97 closed 7 years ago

tobsut97 commented 7 years ago

Hey guys,

when I set overflow-x: hidden on <body> the ScrollReveal animations don't work anymore.

I am using Chrome and ScrollReveal v3.3.6.

jlmakes commented 7 years ago

Can you link to (or create) a demonstration of the problem?

tobsut97 commented 7 years ago

Website: www.ferienwohnung-flatz.at Repo: https://github.com/tobsut97/FerienwohnungFlatz

Decrease the viewport size to around 1280px and then its not working anymore. I think the problem is either in the index.php or style.css file.

jlmakes commented 7 years ago

I see.

You’re including ScrollReveal 3 at the bottom like this:

<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>

Can you do me a favor and try the ScrollReveal 4 beta?

<script src="https://unpkg.com/scrollreveal@beta"></script>
tobsut97 commented 7 years ago

Did it, same issue as before.

jlmakes commented 7 years ago

ScrollReveal 4 exposes a lot more information which can help debugging; can you upload that change to the site so I can take a closer look? (Thanks)

Also, recreating this issue using JSBin would help confirm the bug.

tobsut97 commented 7 years ago

Okay, uploaded the change to the live version of the site. Will try to recreate this issue in JSBin.

JSBin: https://jsbin.com/liyaridubo/edit?html,css

jlmakes commented 7 years ago

Thanks for raising the issue @tobsut97, cause I’m actually having the same problem locally. (I didn’t know removing overflow-x solved it though.) Except to my knowledge, this only started very recently for me.

I thought it was an update to Chrome, but I'm having some issues across browsers.

What I can see though is that the container element is not correctly registering scroll events when overflow-x is applied. This can be seen by the scroll.top == 0 below:

screen shot 2017-10-04 at 4 54 36 pm

When the overflow-x is removed, the container's scroll properties successfully capture scroll distance:

screen shot 2017-10-04 at 4 56 41 pm

This is why elements don't reveal: they aren't considered "visible", because visibility depends on scroll position information.

tobsut97 commented 7 years ago

Makes sense. So how do I fix this? Do I have to remove the overflow-x:hidden?

jlmakes commented 7 years ago

Well, the overflow-x: hidden elimintates unwanted scrollbars/extra space (particularly on mobile) when using reveal animations that enter from the sides; if you aren‘t worried about that, then in your case, the simple solution is to remove the overflow-x property.

The part I find confusing is that https://scrollrevealjs.org uses overflow-x: hidden (and has for years), and even is running v4.0.0-beta.13... and doesn‘t have this problem, which is why I was hoping we could recreate it with a simple JSbin.

tobsut97 commented 7 years ago

The problem is that my site does some weird things on mobile when I remove the overflow-x property. So I either have to figure out a workaround for this or I have to keep the overflow-x property and we have to figure out a solution.

jlmakes commented 7 years ago

Well, I’m working on ScrollReveal full-time, and this bug is a priority. I will find a solution.

For you, what if you take overflow-x: hidden off of the body, and wrap the content in a div that has overflow-x: hidden instead... does that get you anywhere?

tobsut97 commented 7 years ago

YES! Thanks so much. 👍

jlmakes commented 7 years ago

This is actually a Webkit bug @tobsut97.... it seems to be the combination of:

This causes window.pageYOffset and document.documentElement.scrollTop to always return 0.