Is responsive only for fullscreen mode?

[htopia]

I've been testing the responsive feature, and I've noticed that the feature only seem to work correctly when using the fullscreen option.

Is the responsive feature intended to be used only on fullscreen?
Is the maxWidth property validated against the viewport's width? or against the container of the canvas or the canvas itself?

I have a pen here which shows my issue: https://codepen.io/htopia/pen/ZEJGMwd

With less than 1200px width, the particles should be shown green, and after 1200px width, the particles should be red.

If you make the example take the whole screen, then the responsive feature works as intended.

[matteobruni]

I’ve tested only in full screen, I’m going to do more tests to find the issue, it should have worked for every configuration, but maybe I made a mistake

[matteobruni]

I've tested your sample, the responsive is triggered when a resize event is fired. If you change only the CSS on codepen it doesn't fire the event. If I change the javascript it refreshes and the particles became red with a wide canvas.

I've checked the code and uses the canvas width to calculate the responsiveness.

[htopia]

Ah I see, so the maxWidth refers to the width of the canvas. I thought it would be similar to CSS media queries where you always work responsive based on the screen size. That may be tricky for people using tsparticles in specific containers of a web site and not using it on the full screen.

I just tried changing the maxWidth in my example to 170 instead of 1200 and reduced my browser window size until the container starts to become smaller and I see in the inspector the canvas' width updating, however this time the particles are red and never become green, as I thought it would hit the 170 width specified based on what you said about working with the canvas size.

Or maybe I misunderstood, would you be able to test that?

[matteobruni]

I've tested with a 170px width and the window resize event doesn't trigger the responsive refresh. This looks like a bug, and I'm going to check it soon.

[htopia]

Hi @matteobruni, I just tested today the new release and it seems to have fixed the issue! Thank you so much.

I still think it would be nice to have a "screen" mode in the responsive configs, so that it validates against the screen size and not against the canvas size. Is this something we can put a feature request for?

The use case for this is: I have a container which in mobile increases the size as per the CSS media queries, so the canvas size may end up being bigger than in desktop screens, so applying the maxWidth property for the mobile version of the container now applies to the desktop version, because the container in desktop version is smaller.

[matteobruni]

Hi @matteobruni, I just tested today the new release and it seems to have fixed the issue! Thank you so much.

I still think it would be nice to have a "screen" mode in the responsive configs, so that it validates against the screen size and not against the canvas size. Is this something we can put a feature request for?

The use case for this is: I have a container which in mobile increases the size as per the CSS media queries, so the canvas size may end up being bigger than in desktop screens, so applying the maxWidth property for the mobile version of the container now applies to the desktop version, because the container in desktop version is smaller.

This could be a new feature, open an issue about that so I can track it in the releases and commits.