Render issue

[Stalh]

Hello, thank you for the library.

I've encountered a bug and I confess I don't really know how to explain the problem but I'll try to show it (it's my first issue).
The problem is simple when I want to make particles appear in the background of the "body" it works but it does not extend to the entire body and it does not appear on the last two sections of the "body". What I don't understand is that when I use "inspect element", it works as if it reloads the effect and applies it again.

Thanks in advance for the answer and sorry if I wasn't clear enough!

Pictures:
[Before


]

[After "nspect element"

]

[simeydotme]

Ah, hi @Stalh thanks for opening this issue!

I do believe though, this is not a bug or other with the Sparticles really.. let me explain.

The particles exist on a canvas element, and you've elected to sit it in the background of the page. One of my main goals with this is high performance and no lag/jank. One of the major causes of jank is things moving or changing size, and also running a constant thread/loop to listen for changes. Therefore I am only updating the size of the canvas when the window changes size only. And it just so happens that opening the Dev Tools causes the window to change size, triggering the canvas to re-calc.

Now the question is why is it wrong size in the first place?

My hunch is that you're running some kind of client side library/framework which is loading the canvas (particles) and then adding new elements to the page (or toggle hide/show) ?

The easiest way to solve this is to call the Sparticles after you have finished rendering your page elements , another solution is to manually update the canvas size with the document.body.height and document.body.width as described here https://github.com/simeydotme/sparticles#setCanvasSize after your new page elements are loaded

Let me know if that helps :)