Masonry race condition causing grid cards to be overlaid

  • The last thing from our pro plugin update I can’t figure out is: why do the grid cards under the map sometimes get overlaid. Switching back and forth between the list and grid options to force a relayout fixes the issue.

    Just reloading the page makes it seem like it’s only a problem on the first load, but scrolling through the pages of results easily reproduces it.

    So it’s highly likely the #1 problem with Masonry — if the content is not loaded fully yet, it will miscompute the offsets. I see you already take imagesLoaded into account, but even wrapping it in a 3s delay in maps.js doesn’t always avoid the problem and that should be plenty of time. Custom fonts and other styling could be an issue, but by the time you scroll to eg. page 2 of results, all the base network activity has been done already, only the actual new texts and images need to be fetched. And that’s not itself an issue either, since moving back to the previously loaded result page won’t need to fetch anything, but can still reproduce the problem. So it can’t be a network related race.

    It also makes me think it can’t be a bug in the imagesLoaded library, some other content must be to blame. The bigger title font wouldn’t explain it either, since the offsets are much bigger than the size increase from whatever is the default font. And it’s not always bad anyway. To drive the point home fully, adding a relayout call on document.fonts.ready doesn’t fix it. Hopefully it’s not a problem in Masonry itself.

    Anyway, help tracking this issue down would be appreciated.

    The page I need help with: [log in to see the link]

  • You must be logged in to reply to this topic.