[Bug]: 1.42.2 still seems to have image flickering for masks

[alexey-dc]

Contact Details

iwizem@gmail.com

What happened?

The original bug was filed here: #3514

Thanks so much for the prompt reaction, very impressed!

However I have not been able to get the fix to work; the CodeSandbox I originally linked still produces the flicker after being updated to 1.42.2: https://codesandbox.io/s/upbeat-haze-hfhsue

I also re-ran my local setup with 1.42.2, but also does not appear to be resolved.

I also see the CodeSandbox has a version 2.0.3 - which I don't see on npm (https://www.npmjs.com/package/react-tsparticles) - but that also has an image flicker when using a mask, though the particles don't show up so the configuration doesn't port perfectly.

Version

1.42.2

Which library are you using?

React.js (react-tsparticles, react-particles-js)

tsParticles Configuration

{
        fullScreen: {
          enable: true,
          zIndex: 0
        },
        particles: {
          number: {
            value: 200,
            limit: 300,
            density: {
              enable: true,
              value_area: 800
            }
          },
          color: {
            value: "#ffffff"
          },
          shape: {
            type: "circle",
            stroke: {
              width: 0,
              color: "#000000"
            },
            polygon: {
              nb_sides: 5
            },
            image: {
              src: "images/github.svg",
              width: 100,
              height: 100
            }
          },
          opacity: {
            value: 0.5,
            random: true,
            anim: {
              enable: true,
              speed: 1,
              opacity_min: 0.5,
              sync: false
            }
          },
          size: {
            value: 30,
            random: true,
            anim: {
              enable: true,
              speed: 10,
              size_min: 10,
              sync: false
            }
          },
          line_linked: {
            enable: true,
            distance: 100,
            color: "#ffffff",
            opacity: 1,
            width: 1
          },
          move: {
            enable: true,
            speed: 3,
            direction: "none",
            random: false,
            straight: false,
            out_mode: "out",
            bounce: false,
            attract: {
              enable: false,
              rotateX: 600,
              rotateY: 1200
            }
          }
        },
        interactivity: {
          detect_on: "canvas",
          events: {
            onHover: {
              enable: true,
              mode: "bubble",
              parallax: {
                enable: false,
                force: 60,
                smooth: 10
              }
            },
            onClick: {
              enable: true,
              mode: "push"
            },
            resize: true
          },
          modes: {
            grab: {
              distance: 400,
              lineLinked: {
                opacity: 1
              }
            },
            bubble: {
              distance: 400,
              size: 100,
              duration: 2,
              opacity: 1,
              speed: 2
            },
            repulse: {
              distance: 200
            },
            push: {
              particles_nb: 4
            },
            remove: {
              particles_nb: 2
            }
          }
        },
        backgroundMask: {
          enable: true,
          cover: {
            color: {
              value: {
                r: 0,
                g: 0,
                b: 0
              }
            }
          }
        },
        retina_detect: true,
        fps_limit: 60,
        background: {
          image: "url('https://particles.js.org/images/background3.jpg')"
        }
      }

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[alexey-dc]

I tested on a few other computers, and it does not reproduce.

The laptop it's happening on is a latest generation M1. I also have the previous generation M1, and it does not happen there.

Here are my specs:

Mac OS: 12.0.1
MacBook Pro (16-inch, 2021)
Chip: Apple M1 Max
Memory: 64 GB

And Chrome 99.0.4844.51 (Official Build) (arm64). Note my old M1 has Mac 11.1 - perhaps it's the OS, not the hardware.

I'll proceed with using tsParticles for my website though, since the impact is much narrower than I feared. I'll keep trying to get more info on my end though.

I've tried:

• using tsParticles w/o a wrapper - still produces the flicker; demos w/o a mask flicker too
• clicking through as many demos as possible - and most flicker, but some don't
• demos that don't flicker seem to be using raw tsParticles w/o react
• not sure that that guarantees a no-flicker. I'm still using tsParticles from react even when I'm not using react-tsparticles.

I'll keep investigating.

[matteobruni]

I think is something related to #3074, there's a double canvas resize event fired when starting the first time that I'm investigating, and it could be the flicker cause too.
I'll let you know when I've found a solution

[alexey-dc]

Awesome, @matteobruni, very impressed! Thanks so much - it looks like it's fixed! Love this library!