Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not working when overflow-x:hidden #379

Closed
tobsut97 opened this issue Oct 4, 2017 · 13 comments

Comments

Projects
None yet
2 participants
@tobsut97
Copy link

commented Oct 4, 2017

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

This comment has been minimized.

Copy link
Member

commented Oct 4, 2017

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

@jlmakes jlmakes added the Question label Oct 4, 2017

@tobsut97

This comment has been minimized.

Copy link
Author

commented Oct 4, 2017

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.

@scrollreveal scrollreveal deleted a comment from tobsut97 Oct 4, 2017

@jlmakes

This comment has been minimized.

Copy link
Member

commented Oct 4, 2017

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

This comment has been minimized.

Copy link
Author

commented Oct 4, 2017

Did it, same issue as before.

@jlmakes

This comment has been minimized.

Copy link
Member

commented Oct 4, 2017

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.

@jlmakes jlmakes added Bug Unconfirmed and removed Question labels Oct 4, 2017

@tobsut97

This comment has been minimized.

Copy link
Author

commented Oct 4, 2017

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

This comment has been minimized.

Copy link
Member

commented Oct 4, 2017

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.

@jlmakes jlmakes removed the Unconfirmed label Oct 4, 2017

@tobsut97

This comment has been minimized.

Copy link
Author

commented Oct 4, 2017

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

@jlmakes

This comment has been minimized.

Copy link
Member

commented Oct 4, 2017

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

This comment has been minimized.

Copy link
Author

commented Oct 4, 2017

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

This comment has been minimized.

Copy link
Member

commented Oct 4, 2017

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

This comment has been minimized.

Copy link
Author

commented Oct 4, 2017

YES! Thanks so much. 👍

@jlmakes jlmakes added the Browser label Oct 4, 2017

@jlmakes

This comment has been minimized.

Copy link
Member

commented Oct 4, 2017

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

  • Any overflow property set on <html>
  • Height 100% set on <html>

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.