Layout destroyed

[Andreas Gerum]

Hello,

i use ShuffleJs version 5.4.1 and noticed some strange layout shifts:

The problem is that this doesnt happen everytime... . I reload the page, scroll on it, ... reload - Sometimes it happens sometimes dont... .

If you resize the browser window manually, the layout adjusts itself immediately - Everything is pushed correctly again.

Can anybody relate to that issue or have more infos about it? I am very sorry about not having more detailed infos, but this is a really annoying and serious problem. Whenever it occurs the layout looks terrible.

Usually the layout looks like this:

so whenever it gets destroyed, some big gaps show up

[Glen Cheney]

I won't be able to help you unless you provide an example of it not working. All I can suggest is that you ensure the size of your shuffle items does not change as you scroll/load the page. Check out the images demo for more info.

[Samuel Gaona]

I have the same problem, it occurs somethings, I have a grid of 4 columns but somethings the grid messes up and it turns into a one column grid. On iPad (Chrome & Safari) and Mac (Safari) occurs more often.

[hadicodes]

have same problem with tailwindcss
<div id="articlewrapper" class="grid grid-cols-3 gap-4 md:gap-4 w-full"> <a :v-if="1 <= data.length" v-for="(datain, index) in data..infobox" :key="index" :to="/${datain.slugOfArticle}" :data-groups='[${datain.category}]' class="gradient-border cursor-pointer col-span-3 sm:col-span-1 p-4 flex flex-col border-2 border-white bg-white dark:bg-gray-600 article" rel="noopener"> <img :src="${datain.attributes.url}`" class="h-16 w-16" />

        <h5 class="font-semibold text-xl mt-4">{{ datain.title }}</h5>
    </a>
    <div class="js-shuffle-sizer">
    </div>
</div>

and script
import Shuffle from 'shufflejs';
Shuffle.options = {
speed: 500,
}
function clicked(value){

const element = document.getElementById('articlewrapper');
const sizer = element.querySelector('.js-shuffle-sizer');
const shuffleInstance = new Shuffle(element, {
itemSelector: '.article',
sizer: sizer, // could also be a selector: '.js-shuffle-sizer'
});
shuffleInstance.filter(value);
}
`