Revealing large images causes odd behavior?

[camsarmiento]

Hey I'm using scroll reveal v4 at this website http://camilomancilla.com.co/AGR.html but without reason stopped working, when scroll down shows the items for a while but then the items hide again as quick as I keep scrolling down, I've been searching about this bug but there isn't any case about this... Help me!!!

Environment

• Operating System: Mac OS
• Browser Version: Chrome 69.0.3497.100
• ScrollReveal Version: v4

[GarryKnimble]

I added html, body {height:100%;} and it seems to work fine after that.

[jlmakes]

ScrollReveal 4 adds body { height: 100%; } automatically; historically applying this style to html has not been necessary, but I'm curious if it was required in this case.

Did you solve this @camsarmiento ?

[camsarmiento]

Not at all, I'be trying different stuff but it's been quite a mission, is there something else I can do ?

[GarryKnimble]

Looking further into it, weirdly if the width of the window is smaller than a certain amount it stops working. However, bigger screen and it starts working again. Below is a gif of what happened to me. From my experimentation, it might be a styling issue. However, I will look further.

[need to fix link]

EDIT: After further investigation, it looks like it starts working when the window is resized width wise and not the css change. It seems to be only happening in webkit browsers. I'll keep experimenting. @jlmakes

@camsarmiento Have you tried viewing the webpage in a browser like Edge or Internet Explorer? It seems to work fine in those browsers.

EDIT2: I'm getting conflicting results, but it seems the only browser it doesn't work in is Chrome for me.

[twister65]

I had the same problem with my website, I called the sync function using the option.beforeReset callback to resolve it (with the option.reset as true).

For example :

sr.reveal('#search', {
  beforeReset: function(){
    sr.sync()
  },
  reset: true
});

re: https://scrollrevealjs.org/api/sync.html

[twister65]

With `option.reset` `true`


With `option.reset` `true` and `option.beforeReset` `function(){ sr.sync(); }`

[twister65]

Otherwise, replace :
https://github.com/scrollreveal/scrollreveal/blob/2f70956cca0a65afdd808d3036f3f111fd564862/dist/scrollreveal.js#L1043
by :
styles.push(element.styles.opacity.computed);
And replace :
https://github.com/scrollreveal/scrollreveal/blob/2f70956cca0a65afdd808d3036f3f111fd564862/dist/scrollreveal.js#L858
by :
styles.push(element.styles.opacity.computed);
in initialize and triggerReset functions

[jlmakes]

I'm noticing in both examples, there are rather large images being revealed.

It's starting to sound like ScrollReveal is being initialized before these large images have finished loading. If that were true, then the element dimensions could be incorrect, making elements reveal/reset at unexpected times— and explain why calling sync() would fix things.

@camsarmiento try wrapping your ScrollReveal code in a load event handler, e.g:

window.addEventListener('load', function() {
  ScrollReveal().reveal('.items');
});

[twister65]

In my case, it is a slider (set of images) and it takes much time to be loaded than other elements. This issue occurs only when reset is triggered (reveal works fine).

[twister65]

Wrapping code for an article body :

window.addEventListener('load', function() {
  sr.reveal('.main_component', {
    origin: 'top',
    distance: '50px',
    duration: 1330,
    reset: false
  });
});

Result : the article has disappeared

Note : if option.reset is true then 👍

[jlmakes]

Any updates @camsarmiento @johnphilosopher ?

[GarryKnimble]

Any updates @camsarmiento @johnphilosopher ?

I can't really seem to come to a definitive conclusion as seemingly resizing the browser window in chrome fixes the problem, while it works properly in other browsers. I admittedly haven't tested much else after, but I'll look into it more.

[jlmakes]

I really appreciate your help @johnphilosopher

I can't really seem to come to a definitive conclusion as seemingly resizing the browser window in chrome fixes the problem

There's enough evidence in this thread, that I'm almost certain the problem is that large images are passed to ScrollReveal before they have finished loading.

ScrollReveal caches element dimensions for faster scroll event handling, but these dimensions are updated on browser resize.

Element dimensions are essential to reveal logic, so it's important that large images be given time to finish loading and assume their proper dimensions. (This was why I suggested using ScrollReveal on large images inside a window load event callback.)

This whole situation can be avoided by:

1. Applying height and width properties to images using HTML or CSS
2. Revealing large images after they have loaded, e.g. inside a window load event callback

[saintplay]

I agree with @jlmakes, is the responsibility of the developer to be aware of these image loading inconsistencies. Other libraries like scroll-to-element that rely on element position will also fail, because of the same problem