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

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

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

Thanks!

Sep 07 '18 02:09 ghost

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;
}

Sep 07 '18 06:09 jlmakes

Yep, using the method at the bottom:

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

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

Sep 07 '18 19:09 ghost

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.

Sep 07 '18 23:09 jlmakes

Fantastic! Glad I could help.

Sep 08 '18 00:09 ghost

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

Sep 09 '18 11:09 jlmakes

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

Sep 10 '18 17:09 ghost

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.

Sep 10 '18 20:09 jlmakes

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:

Mar 18 '19 23:03 elgandoz

@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.

Mar 19 '19 07:03 jlmakes

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!

Apr 20 '20 11:04 jorisvdz