I'm running into an issue with flickering when rendering a moving point cloud in Three.js. The issue only appears when the page is loaded on a Macbook Pro Retina screen. Interestingly, if the page is loaded on an external monitor (2560x1440) and dragged across to the retina screen, there's no flickering issue. If I reload the same page on the retina screen, the flickering starts again. There are no flickering issues on an iPhone.

The background does not flicker and it only happens when the point cloud is moving. It does not matter whether the movement is a constant speed. The entire point cloud flickers at the same time.

Renderer:

renderer = new THREE.WebGLRenderer({
        powerPreference: "high-performance"
    });

Material:

        const material = new THREE.PointsMaterial({
            vertexColors: true,
            size: 1,
            sizeAttenuation: false,
            depthTest: false,
            transparent: true,
            opacity: 0.4,
            alphaTest: 0.2
        });

The following don't change the issue:

• Changing the near or far frustum
• Enabling anti-aliasing
• Not related to z-fighting. Depth testing or writing don't make a difference.
• Opacity, alphaTest, transparent
• Reducing the number of points in the point cloud
• Changing browsers (tested on Chrome, Safari, Firefox)
• Changing the renderer powerPreference

I can't seem to figure out why the issues is specific to the Macbook Pro Retina screen.

Thanks for the help.