search

CrazyTim / spin-wheel

An easy to use, themeable component for randomising choices and prizes.
https://crazytim.github.io/spin-wheel/examples/themes
MIT License
214 stars 57 forks source link

Infinite resize loop #46

Closed DashBarkHuss closed 3 months ago

DashBarkHuss commented 3 months ago

Resizing is looping and causing the spin wheel to never stop growing. code

ResizeObserver loop completed with undelivered notifications. 
 at https://cdpn.io/cpe/boomboom/index.html?editors=1111&key=index.html-dc5a19c1-132d-c34f-92cd-b979d90cd8a5:0
CrazyTim commented 3 months ago

Hi @DashBarkHuss, thanks for raising, it needs to be fixed. I think the wheel needs to be inside a container element that has a fixed size so Wheel.resize() will work properly.

Add this style to your example and this should fix it:

html, body, .wheel-container {
  height: 100%;
}

It would be great if we didn't need to do this! So I'll leave this ticket open as a bug.

worldbiomusic commented 3 months ago

I got the same issue and solved by set height to px. If height is % infinite resizing loop started.

.wheel-container {
  width: 100%;
  height: 400px;
}
CrazyTim commented 3 months ago

@worldbiomusic exactly! It's fine if the container's size is constrained, otherwise I think the resize method causes a positive feedback loop.

CrazyTim commented 3 months ago

@DashBarkHuss this has been fixed in https://github.com/CrazyTim/spin-wheel/commit/c1f425e11fcd1a474f2a31172a180ddc11137738.