Browser freeze with esm modules, carousel type, and empty images

[antony]

First off - thanks for an excellent, lightweight library!

I've been using this in my project for a while, and I have a lot of dynamic carousels which pull images in based on some data.

What I've found seems pretty severe, and that is - if a carousel has no slides, and it is of type carousel, it immediately causes the browser to use 110% CPU, freezing the tab (or often, the entire machine) up.

This happens on both Chrome and Firefox but I'd recommend running the recreation (attached) in firefox since chrome is really hard to kill once it gets stuck!

I created a recreation of the problem here:

https://github.com/beyonk-adventures/glide-empty-carousel-bug - check it out and use npm run dev

Cheers

[jankrloz]

Same for me, I tried to update the type to carousel after mount, but it doesn't work.

[BFoucher]

same for me, not found solution except check the item count before call the library

[Jeevan-Kishore]

Two hours of debugging and found this issue., seems to exist in the latest version

[ArshadVayani]

I am facing the same issue as well.

[wlcx]

I'm seeing this with current CDN version in Chrome 76 on macos too.

(Apologies for the "me too" style comment, but given the time delay thought it worth adding!)

[documents-design]

Hey, we fixed this for our use in a branch. It's far from perfect, but we potentially throw exceptions at .mount() if a glide.js component encounters an error in its mounting function.

It's a bit noisy at call site, though, so we won't propose it for master.

state.instance = new Glide(id, {
  type: 'carousel',
  debug: true,
});
try {
  state.instance.mount();
  // bind events, etc.
} catch (e) {
  // handle it however you'd like
}

The branch also introduces a log() method that logs its argument if the debug flag was passed to glide's constructor, and returns it anyway. All the test suite still pass, so I think we didn't break anything else.

master...documents-design:Fixes_No_Slides

[noguespi]

I'm affected by this bug too on FF latest and chrome latest.

[simplenotezy]

I have the same issue. I have noticed, for some reason, it doesn't happen on the first page visit (e.g. when all cache is cleared). However, when you revisit the page and scroll down to where the slider is, and it beings to mount, the whole site will hang.

[simplenotezy]

I believe this could happen if you call "destroy" and then re-mount it again too quickly. It happened when we would call destroy, then remount after 100ms. I extended this to 500ms and the error does not occur.

[documents-design]

This also happened to us. We now poll the DOM to check it is in an initial state after destroying / before mounting. Too many assumptions on what already exists / does not exist otherwise. We wrapped this behavior in vue components for convenience. Le jeu. 29 oct. 2020 à 14:17, Mattias Fjellvang <notifications@github.com> a écrit :

…

I believe this could happen if you call "destroy" and then re-mount it again too quickly. It happened when we would call destroy, then remount after 100ms. I extended this to 500ms and the error does not occur. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#337 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AH22ZNKX7I7Y5ROPOJPEQYLSNFTNHANCNFSM4HDQ7XWA> .

-- *Documents*, atelier de graphisme 28 rue Naudin 31200 Toulouse https://documents.design

[sayore]

still occuring in 2021,
was thinking that it was the bundling i did, but the freezing was simply because i had removed an content element in the backend which then lead to my typescript code not working.

[sayore]

#538
#522
#441

Fix probably in #471

[nicobrinkkemper]

This isn't fixed after running 'yarn add @glidejs/glide'
Can the fix for this very severe bug be pushed to registry ASAP?

[tniles320]

I was able to fix the issue in mine by calling the glideMount function in the useEffect hook like this:

useEffect(() => {
    handleFeaturedContent().then(() => {
      glideMount();
    });
  }, []);

the handleFeaturedContent function makes an axios call and then sets state that glide uses.
Hope this helps some