Webkit vs Chrome GLSL Rendering Issues in a litle threeJS Project

Attention threeJS wizards! :magic_wand:

I’m battling a strange rendering inconsistency with a GLSL shader in my threeJS project.

The Challenge:

  • In Webkit browsers (Safari), the shader looks amazing, with buttery smooth transitions and visuals.
  • But in Chrome (and possibly others), there are these jarring seams or artifacts that appear, making it look disjointed (see attached image, the black line indicates one such seam).

Efforts Made:

  • Double-checked the shader code for validity.
  • Researched common threeJS/GLSL compatibility issues across browsers.

More Info:

  • I’ve attached an image to illustrate the seam problem (it might be more pronounced live).
  • You can also take a peek at the work in progress on the website: https://couplesfacilitation.com/

The Plea:

Has anyone else come across similar rendering discrepancies between Webkit and Chrome when using threeJS and GLSL shaders?

  • Any suggestions on how to troubleshoot or fix this to achieve consistent rendering across browsers?
  • Are there specific settings or considerations for Webkit vs Chrome compatibility within the threeJS/GLSL realm that I might be overlooking?

Any help from the community would be much appreciated!