Image overlaying when images are cached

[zta6]

Hello,

I've got a weird bug thats popping up only on Safari on an iMac. I haven't been able to reproduce the issue anywhere else and I've tried to do some research into the problem but I haven't found much.

On the first load of an image gallery everything looks fine, as shown below:

On the second load of a gallery all of the images are stacked on top of each other like this:

At the top of the screen you can see the top few pixels of each image. They're all stacked on one another like a deck of cards. As I said before this only seems to happen on an iMac on safari. On chrome on the same machine there are no issues. I have also tried to reproduce the issue on other machines with Safari, with no success, and on other machines with different browsers, with no success. We haven't been able to test on another iMac with Safari to see if the issue is specific to our machine or not. This is on Safari Version 11.1 (13605.1.33.1.2).

If you empty the cache (command+E) and refresh the page, the gallery loads fine again. So it appears that this has something to do with Safari's caching. Additionally, if you resize the browser window at all the gallery fixes itself.

Do you have any ideas as to what the issue could be? Is this an issue you've seen before?

If you have any additional questions feel free to ask, Thanks, Zach

[jrmd]

Hey @zta6 ,

Thanks for filing an issue, this seems like it could be an issue with the images loaded stuff; as a solution you could try calling recalculate manually when you know everything is loaded.

Without an actual demo link I cant investigate this further so the above is just a guess on what could be the potential solution.

Let me know if that works or provide me with a link and I'll check it out.

Thanks, Jerome

[kaptainroll]

I'm having this same issue with cached images on Firefox. It doesn't seem to happen on Chrome.

I tried the above solution with no success. I have a feeling that since the images are already cached/loaded it doesn't trigger the recalculating. How would I go about fixing it?

[electerious]

This usually happens when an onload event gets attached AFTER an image has been loaded (which is the case then it's cached): https://stackoverflow.com/questions/12354865/image-onload-event-and-browser-cache

[jrmd]

Re-opening as I closed the wrong issue.

[jrmd]

Hey @kaptainroll and @zta6

It seems that adding runOnImageLoad will cause it to run on even complete images so you will be able do something similar to this

masonry.runOnImageLoad(function () {
  masonry.recalculate(true);
}, true);

Let me know if this works.

Thanks, Jerome

[zta6]

@jrmd this issue seems to have gone away for the time being. If it comes back I'll definitely try this. Thanks!!

[jrmd]

great to hear @zta6 let me know if it happens again, it must be down to timing of functions running to actually loading