density doesn't work stably on smaller screen sizes

[WebDeg-Brian]

Source code:

I probably have done something wrong. Here is the my particles setup:

import React from 'react';

import styled from 'styled-components';

import ParticlesCanvas from 'react-particles-js';

const StyledParticlesWrapper = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
`;

export default Particles = props => {
  return (
    <StyledParticlesWrapper>
      <ParticlesCanvas params={{
        particles: {
          number: {
            value: 80,
            density: {
              enable: true,
              value_area: 800
            }
          }
        }
      }} />    
    </StyledParticlesWrapper>
  );
}

Behaviour

When the page is loaded on a big screen size, density works. When resizing to a small enough screen size, density sometimes works, sometimes doesn't. I tested the app on iPhoneX and Galaxy S9 screen size as well as responsive mode.

Particles when loaded on a big screen size:

Particles when being resized (Sometimes it works):

Particles when being resized (Sometimes it doesn't work):

How should I fix it? Thanks in advance

My project repo: Eagle Nest The particles file: Particles.js

[WebDeg-Brian]

I also tried this code and notice that the possibilities of the density failure decrease. But still, it happens

import React from 'react';

import styled from 'styled-components';

import ParticlesCanvas from 'react-particles-js';

const StyledParticlesWrapper = styled(ParticlesCanvas)`
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
`;

export default Particles = props => {
  return (
    <StyledParticlesWrapper params={{
        particles: {
          number: {
            value: 80,
            density: {
              enable: true,
              value_area: 800
            }
          }
        }
      }} />
  );
}

[wufe]

There was a bug creating a concurrency of events. This bug has been resolved and will be included in next release (v2.4.0)