search

jlmakes / scrollreveal

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

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

Open ghost opened 6 years ago

ghost commented 6 years ago

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

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

Example

Thanks!

jlmakes commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

Fantastic! Glad I could help.

jlmakes commented 6 years ago

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

ghost commented 6 years ago

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 commented 6 years ago

Say we had something like this...

<html>
<head>

  <script src="https://unpkg.com/scrollreveal@4.0.0/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 commented 5 years ago

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
jlmakes commented 5 years ago

@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 commented 4 years ago

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

Thanks!

trijammer commented 4 months ago

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