Closed MariuzM closed 5 years ago
Hey @MariuzM, I appreciate your patience and thank you for the detailed issue.
There is another issue concerning Chrome and cached images, so perhaps there is a browser bug...
Does this problem also happen in Firefox? Can you confirm that disabling ScrollReveal fixes the issue?
I have noticed this. When i disable the ScrollReveal of course i don't get the fade in effect. But i still get the images on top but in this case it only happens for 1-2 seconds and then it arranges itself correctly.
I think whats happening with SR (animation) + Masonry is that they both clash. I will try to think of something like a JS script to load Masonry first in background with Opacity 0 and then start SR after.
When i was testing yes i had the same issue on Firefox.
It doesn't sound ScrollReveal is the root of the issue @MariuzM.
Unloaded images can throw off Masonry layouts and cause item elements to overlap. — https://masonry.desandro.com/layout.html#imagesloaded
This makes sense, because unless you give images a fixed size, they typically increase in size dramatically once they finish loading. (This actually impacts ScrollReveal as well, since element size and position are essential in calculating whether or not it's within the viewport.) This is why the issue is more obvious with caching disabled.
The key here is to wait for your images to finish loading before invoking Masonry or ScrollReveal. It's up to you how to get this done, but the creator of Masonry does offer a solution: imagesLoaded
Good luck!
Hi first of all big thanks for this cool script!!!
I know it's not your scripts fault and i just blame myself for not knowing more how to code but trying to learn. So i have website that just loads bunch of images. So i'm using Masonry to get that look and ScrollReveal fade stuff. I have noticed especially when working in Chrome Dev mode + No Cache is that some of the images are not loaded correctly looks like they are on top of each other.
Here is the pic of the issue: https://www.dropbox.com/s/4t5vs0725g39hqa/Screenshot%202018-11-16%20at%2010.08.30.jpg?dl=0
Also made a video: https://www.dropbox.com/s/qzzbi6yrvv7mykr/Screen%20Recording%202018-11-16%20at%2010.53.25.mov?dl=0
Here is the full code
HTML: ```php