isotope not always resizing as expected

[trusktr]

Test case:

Unfortunately I don't have a reduced test case because the WIP site has a bit of code and I'm not sure how to reproduce it. I would be open to having a video call to help debug. I can eventually post the code, but it is currently local, not pushed anywhere yet.

In the video, isotope seems to not resize the layout properly sometimes, and resizing the window just a tiny bit again gets it to layout properly. The outer layout itself is built using ResizeObserver, so I'm wondering if maybe having multiple layers of RO has to do with it:

https://youtu.be/E1JWdvRVBFg

I workaround for now is to call the layout() method in a timeout on window resize. The layout is delayed, but at least that seems to get things into shape eventually after a resize:

https://youtu.be/pGNqoRAsgB0

Basically the workaround is this:

const grid = this.shadowRoot.querySelector('.featuredGrid')
const iso = new Isotope(grid, {
    itemSelector: '.card',
    layoutMode: 'fitRows',
})
const delayedRelayout = () => setTimeout(() => iso.layout(), 100)

window.addEventListener('resize', delayedRelayout)

document.addEventListener('readystatechange', function change() {
    delayedRelayout()
    if (document.readyState === 'complete') document.removeEventListener('readystatechange', change)
})

delayedRelayout()

(the video used a timeout of 1000 instead of 100 to make the delay obvious).

[trusktr]

Hmm, apparently 100 wasn't a long enough delay, and things would still sometimes (less often) turn out wrong. Increasing the delay to 500 seems to be working most of the time, but I still encounter the issue (just a lot less often).

[trusktr]

Aha! I think the issue was related to two things:

max-width on the grid items instead of width caused some (but not all) grid items to resize based on parent width (based on window width) while using width instead made all children resize the same, and a transition property for all properties (including max-width) size to be animated, so overall the final size of grid items was not clear for isotope and hence a long delay was needed so that things would be settled by the time layout ran.

Eliminating both of those is working perfectly now.