MeshRefractionMaterial on Mac

Question

I am experiencing a quality issue when rendering a diamond using MeshRefractionMaterial. Specifically, the issue occurs when I run the application on Google Chrome on a Mac computer. On Windows machines and Safari on Mac, the application runs without issue. I have provided links to images that show the output from both Windows and Mac, with the Mac image showing visible degradation in quality.

Windows: https://drive.google.com/file/d/1a2X7tPzVnaBa6LAme-OQ5aNU3EOLeb_d/view?usp=sharing Mac: https://drive.google.com/file/d/1xue5lGV8ex2ek1nfAi_jDl5P3WHBK-Cr/view?usp=sharing

The diamond is rendered using the following code:

<mesh key={element.uuid} name={'Diamond'} geometry={element} position={position} scale={scale} rotation={rot} >
    <MeshRefractionMaterial envMap={texture} {...config} toneMapped={false} />
</mesh>

where config is defined as:

const config = useControls({ 
    bounces: { value: 2, min: 0, max: 8, step: 1 }, 
    aberrationStrength: { value: 0.02, min: 0, max: 0.1, step: 0.01 }, 
    ior: { value: 1.9, min: 0, max: 10 }, 
    fresnel: { value: 1, min: 0, max: 1 }, 
    color: 'white', 
    fastChroma: false 
});

and texture is defined as:

let textureURL = './assets/images/env10.jpg';

The canvas is defined as:

<Canvas shadows dpr={window.devicePixelRatio} orthographic camera={{ 
    zoom: 26.649512048067553, 
    position: [0, 80, 0], 
    fov: 80 
}} gl={{ 
    toneMapping: THREE.ACESFilmicToneMapping, 
    antialias: true, 
    precision: 'highp', 
    preserveDrawingBuffer: true, 
    alpha: true }}>

I am seeking guidance on how to obtain consistent output across different devices. Thank you.