Interval not working in firefox live site but works on localhost

[lonewulfeu]

Hello, happy new year and thanks for this great library!

I have an issue with the elements revealing all at once instead of when scrolling when the site is live in Firefox (latest) only, although it works correctly on localhost. Any ideas of what might be causing this issue? I can send a link to the website if that's ok.

[jlmakes]

Yes please, a demonstration of the problem is ideal.

[lonewulfeu]

Here's the website: http://zefs.gr/ Chrome: Interval works live/localhost Firefox: Interval works in localhost only Edge: Interval works but performance is slow for some reason

$(document).ready(function() {
    window.sr = ScrollReveal();
    sr.reveal(".portfolio .entry", {
        duration: 1000,
        viewFactor: 0,
        mobile: true,
        scale: 1,
        origin: "bottom",
        distance: "200px",
        delay: 0,
        interval: 100,
        reset: false
    });
});

[jlmakes]

If I were to guess, it's because you aren't waiting until the images have finished loading. (So their dimensions are not true when ScrollReveal is initialized.) For example, on Localhost there's no load time so it works as expected.

Cool looking site by the way.

[lonewulfeu]

It's weird, because if I enter a portfolio item and then click the close button (which is an empty href that goes to the main site) the images reveal when scrolled as they should. That happens on Firefox only. Not a big deal I guess, you can close this topic thanks!

[jlmakes]

Once the page is loaded and the images are in the browser's cache, everything should behave normally... that might explain why navigating back to the home page yields the correct behavior.

You're using $(document).ready()

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $(document).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $(window ).on( "load", function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

— jQuery Learning Center

You don't need to wait until the entire page is ready for ScrollReveal, just until your images are done loading; I haven't tested this code, but the general idea would be something like this:

$(".portfolio .entry img").load(function() {
  ScrollReveal().reveal(".portfolio .entry", options);
});

Good luck!