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.

Sign up for GitHub

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

Jump to bottom

Pre-hiding divs with "mobile: false" keeps divs from showing on mobile #455

Open
ghost opened this issue Sep 7, 2018 · 11 comments
Open

Pre-hiding divs with "mobile: false" keeps divs from showing on mobile #455

ghost opened this issue Sep 7, 2018 · 11 comments
Labels
Bug

Comments

@ghost
Copy link

ghost commented Sep 7, 2018 •
edited by ghost
Loading

I don't see default breakpoints provided to fix this issue. Any suggestions?

For now just using breakpoint (min-width: 1024px).

Example

Thanks!
@jlmakes
Copy link
Owner

jlmakes commented Sep 7, 2018

Are you using the technique outlined in the User Experience Guide to prevent flickering?

As mentioned in the guide if you're using the html.sr selector as the base for your "pre-hiding" class, you will only hide elements when ScrollReveal is supported and enabled. E.g:

html.sr .load-hidden {
    visibility: hidden;
}

@ghost
Copy link
Author

ghost commented Sep 7, 2018 •
edited by jlmakes
Loading

Yep, using the method at the bottom:

html.sr .sr-header { visibility: hidden; }

Currently just using the (min-width: 1024px) breakpoint as a workaround.

@jlmakes jlmakes added Bug and removed Question labels Sep 7, 2018
@jlmakes
Copy link
Owner

jlmakes commented Sep 7, 2018

Thanks for the report @dolanb12, I've found the bug and am working on the solution!
I'm glad you found a workaround, but give me a few days and I’ll have this fixed in the next release.

@ghost
Copy link
Author

ghost commented Sep 8, 2018 via email •
edited by jlmakes
Loading

@jlmakes jlmakes closed this as completed in f969dd0 Sep 9, 2018
@jlmakes
Copy link
Owner

jlmakes commented Sep 9, 2018

Please try ScrollReveal v4.0.1 and confirm it solves your issue!

@ghost
Copy link
Author

ghost commented Sep 10, 2018 •
edited by jlmakes
Loading

Doesn't seem to be correcting the problem. But this could possibly be on my end.

The style corrections in the head of the document seem to not be accessible in Chrome dev tools. Although when reverting back to the workaround, I still can't see the styling, but it's doing its job.

scratches head

@jlmakes
Copy link
Owner

jlmakes commented Sep 10, 2018

Say we had something like this...

<html>
<head>

  <script src="https://unpkg.com/[email protected]/dist/scrollreveal.min.js"></script>
  <script>
    ScrollReveal({ mobile: false });
  </script>

  <style>
    html.sr .load-hidden { visibility: hidden };
  </style>

</head>
<body>

  <h1 class="example load-hidden">Hello world</h1>

  <script>
    ScrollReveal().reveal('.example');
  </script>

</body>
</html>

The class .sr was being added to <html> as the first <script> loaded... but immediately after where we set ScrollReveal({ mobile: false }); the class .sr was not correctly being removed from <html> meaning reveal targets would still be hidden by the html.sr .load-hidden CSS ruleset.

This is what I understood to be your problem, and has been fixed in v4.0.1

Also, it may be worth mentioning that ScrollReveal looks at the browser user agent (not media queries or screen size) to determine what is a mobile or desktop device. E.g:

navigator.userAgent
// "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:62.0) Gecko/20100101 Firefox/62.0"

If you are simply resizing the browser window, there won’t be any difference in ScrollReveal behavior.

@elgandoz
Copy link

Hi @jlmakes,
I am doing exactly what you described above, but I'm having the same issue.
I'm using ScrollReveal v4.0.5.

// my styles
.wrapper > .box {
  html.sr & {
    visibility: hidden;
  }
}
// my script
ScrollReveal().reveal('.wrapper > .box', {
  interval: 100,
  duration: 600,
  distance: '0.6em',
  easing: 'ease-in-out',
  mobile: false,
})

Here's a pen in action.
When viewed with mobile UA the elements do not appear:

Screen Shot 2019-03-19 at 10 04 48 am

Repository owner deleted a comment from elgandoz Mar 19, 2019
@jlmakes
Copy link
Owner

jlmakes commented Mar 19, 2019 •
edited
Loading

@elgandoz Ah you're right, I misunderstood.

It does sound like a bug somewhere, because the class sr should not be present on html when ScrollReveal is non-operational:

https://github.com/scrollreveal/scrollreveal/blob/c98fad79f4750dfd80797414e7d94f1cddd2109c/src/instance/mount.js#L2

I’ll take a closer look.

Update: Using FireFox Android emulation, ScrollReveal remains operational (i.e. ScrollReveal().noop === false) which suggests mount.failure() is not being called.

@jorisvdz
Copy link

I am expiring the same behaviour, is there any information on how to fix it?

  • Using ScrollReveal v4.0.5
  • Using the utility class to prevent flickering
  • Using mobile: false
  • Results in: elements not being showed on mobile devices

Thanks!

@jlmakes jlmakes reopened this Apr 25, 2020
@trijammer
Copy link

For reference, this is still an issue with the current version.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@jlmakes @elgandoz @trijammer @jorisvdz