Open ghost opened 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;
}
Yep, using the method at the bottom:
html.sr .sr-header { visibility: hidden; }
Currently just using the (min-width: 1024px) breakpoint as a workaround.
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.
Fantastic! Glad I could help.
Please try ScrollReveal v4.0.1
and confirm it solves your issue!
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
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.
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:
@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:
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.
I am expiring the same behaviour, is there any information on how to fix it?
Thanks!
For reference, this is still an issue with the current version.
I don't see default breakpoints provided to fix this issue. Any suggestions?
For now just using breakpoint (min-width: 1024px).
Example
Thanks!