Resizing in DotLottieWorker leads to JS error - Cannot resize canvas after call to transferControlToOffscreen()

[lkaisers]

Overview

I experience an issue when using the resize method with the DotLottieWorker instead of DotLottie. Uncaught (in promise) DOMException: Failed to set the 'width' property on 'HTMLCanvasElement': Cannot resize canvas after call to transferControlToOffscreen().

Consuming repo

https://www.npmjs.com/package/@lottiefiles/dotlottie-web/v/0.30.2

Labels

• [ ] Add the Type: Bug label to this issue.

[theashraf]

Hi @lkaisers, It would be really helpful if you could provide a CodePen or CodeSandbox example demonstrating the issue.

[lkaisers]

Hi @theashraf, of course, here you go: https://codepen.io/lkaisers-the-typescripter/pen/vYqdJpo

You may have to open the browser console to see the logged issue. But you can also see that resizing doesn't work if you load the page in a narrow window and increase the width so it should be resized, but the canvas appears blurry because the canvas isn't updated.

I also used ChatGPT to find out what's going wrong and its answer makes sense for me. https://chatgpt.com/share/e5ee62fd-a3c8-4c18-b056-0473c0bf3325 Following this answer, the issue arises "because the main thread is trying to resize a canvas that has been transferred to a worker thread". This would be a bug in DotLottieWorker because the resize method needs to work a bit differently to make the worker do the job, but I'm not that experienced with web workers to clearly say what's going wrong here.

[theashraf]

@lkaisers I've released a fix for this issue. Please test out [email protected]. Thanks!!

[lkaisers]

@theashraf I just tested everything and the resizing using DotLottieWorker works as expected! Thank you very much, big improvement for our site performance! 😄