THREE.MeshLine | Mesh replacement for THREE.Line | Graphics library

My three.js scene is completely distorted until I move the mouse somewhere on the site. You can see the nature of the distortion on the image below:

When I move the mouse, the scene suddenly pops and everything is fine. It doesn't seem to matter where exactly the cursor is within the site, it doesn't have to be over the canvas where my scene is rendered. This is how the scene looks after moving the mouse:

The following three.js related dependencies are used:

• "three": "^0.108.0"
• "three-orbitcontrols": "^2.102.2"
• "three.meshline": "^1.2.0"

I tried updating three to the latest version (0.116.1), but that didn't solve the issue either. I managed to replicate this issue on Firefox and Edge, but not on Chrome.

Some extra context: we use OffscreenCanvas for better performance, the mouse positions are sent from the main thread to the web worker on mousemove event, we use that information to slightly move the camera and the background (with offsets). I temporarily removed to mousemove handler logic from the web worker code and the issue still popped up, so it's probably unrelated. We use tween.js to make the camera animations smooth.

Relevant code snippets:

Scene setup:

I'm trying to replicate the effect shown in this Three.js example but instead of showing the wireframe and an opaque box, I'd like to show just the edges without any faces (like what is shown when using the THREE.EdgesGeometry.) I know that setting the linewidth property doesn't work and that using shaders is necessary but I'm not really sure where to begin. For reference, these are the shaders being used in the above Three.js example:

Vertex Shader: