White flash on page load (noticeable only on black/dark backgrounds)

[rohanharikr]

First of all, thank you for creating this library! The design and API is slick :^)

There seems to be a white flash on page load where the cobe globe is, noticeable only on dark backgrounds.

To replicate:

1. Go to https://cobe.vercel.app/
2. Switch from "Light" to "Dark" in the footer of the website
3. Keep reloading - this happens inconsistently

What I have tried: setting a background-color property on the <canvas> element, but the white flash persists.

In https://cobe.vercel.app/, the transition is less jarring because there is a borderRadius: 50% applied to the canvas, causing a white circular flash when in normal cases would be a rectangular flash.

https://github.com/shuding/cobe/assets/12775813/cc042915-d6ed-4aa3-ab55-98abf40dd2db

[shuding]

Have you tried giving the <canvas> a transparent background via CSS?

[rohanharikr]

@shuding Yes, tried inlining background: transparent and also setting via CSS - white flash (inconsistent on page load) persists.

[jrnxf]

Hey! I encountered the same issue today, and initially thought it was on page load as well, but after looking more closely I believe the issue actually happens right before the refresh when the page is unloading. The following fixes the issue for me:

to animate out:

useEffect(() => {
  const handleCleanup = () => {
    if (canvasRef.current) {
      canvasRef.current.style.opacity = "0";
    }
  };

  window.addEventListener("beforeunload", handleCleanup);

  return () => {
    handleCleanup();
    window.removeEventListener("beforeunload", handleCleanup);
  };
}, []);

or completely destroy:

useEffect(() => {
  const handleCleanup = () => {
    if (globeRef.current) {
      globeRef.current.destroy();
    }
  };

  window.addEventListener("beforeunload", handleCleanup);

  return () => {
    handleCleanup();
    window.removeEventListener("beforeunload", handleCleanup);
  };
}, []);

Hope this helps!

And thank you @shuding for an amazing library!