Images not displaying properly on load/reload - Showing as stacked or overlapping [#2360039]

We are using Gridly for a new site and really like the responsive design, however we are having problems with inconsistent results when loading the page. On first load we will often get the content "stacked" like in the first attached image. This looks like maybe Gridly didn't load? Reloading results in either a correct view, or in an overlapping view like the other two attached images. If the images are overlapping, re-sizing the window will make them pop into place. Reloading results in the same chance of correct or overlapping.

File	Size	Author
correct.png	1.11 MB	jeramy
overlapping.png	820.88 KB	jeramy
stacked.png	291.63 KB	jeramy

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

Salah Messaoud CreditAttribution: Salah Messaoud commented 28 October 2014 at 15:33

Hi jeramy,

Sorry for the late reply, I have been busy. Could you please specify more ?

for example:

What browser you tested the theme on ?
Are you logged in ?
Have you changed some configuration ?
Have you changed the jquery version by default it is set to 1.7 ?

Thanks for reporting this issue

Comment #2

jeramy CreditAttribution: jeramy commented 28 October 2014 at 15:53

I think I have identified and (for the most part) resolved the issue I was having. Masonry was calling imagesLoaded() in /profiles/gridly/modules/contrib/masonry/masonry.js but imagesLoaded did not appear to be installed. I did an install from https://github.com/desandro/imagesloaded and now I am not getting the overlapping. I will still, occasionally get the stacked, but this is less common and a reload generally resolves it. To answer your questions though:

I had tested in Chrome, IE and Firefox
I was logged in (it is a secure site, so you have to log in to see anything)
It is a default config of Gridly, though I have quite a few other modules running
I did use jquery update to set jquery to 1.9 which was required for other modules