Shader effect always rendering as solid black in firefox on macos

[clabe45]

Background

This bug was first reported in #132 in July of 2022. I'll provide some more details here and close #132 as a duplicate of this bug.

Steps to reproduce

1. Run the smoke tests:

   git clone https://github.com/etro-js/etro.git
   cd etro
   npm run test:smoke
   

2. Open the "effects" example in Firefox:

   npm run build && npm run start
   # Open http://127.0.0.1:8080/examples/introduction/effects.html in Firefox
   

Expected behavior

1. The smoke tests for all Shader-based effects should pass.
2. All layers with GLSL effects should render the altered image.

Actual behavior

1. None of the Shader-based effects render properly in the smoke tests (see logs below).
2. All layers with GLSL effects render as a black screen. No errors or warnings can be found in the browser console.

Affected environments

Operating System	Browser	Impact
macOS M2 Max	Chromium-based browsers (tested on Brave)	✅ Works as intended
macOS M2 Max	Firefox	🐛 Can reproduce bug
Arch Linux	Firefox	✅ Works as intended

I only have access to a macbook pro now, but when I had my arch laptop a few months ago, the effects rendered correctly on Firefox.

Related docs

https://etrojs.dev/docs/reference/effects/shader

Failed tests

Firefox 121.0 (Mac OS 10.15) Integration Tests -> Effects -> GaussianBlurHorizontal -> should blur with 5-pixel radius FAILED
	Expected 98.44 to be less than or equal 1.5.
	<Jasmine>
	global.wrappers["/Users/caleb/Projects/Code/etro-js/etro/spec/smoke/util.spec.ts"]</compareImageData/</<@spec/smoke/util.spec.ts:46:20 <- spec/smoke/util.spec.js:88:38
	step@spec/smoke/util.spec.js:33:23
	global.wrappers["/Users/caleb/Projects/Code/etro-js/etro/spec/smoke/util.spec.ts"]</__generator</verb/<@spec/smoke/util.spec.js:14:53
	fulfilled@spec/smoke/util.spec.js:5:58
Firefox 121.0 (Mac OS 10.15) Integration Tests -> Effects -> Grayscale -> should desaturate the target FAILED
	Expected 92.97 to be less than or equal 1.5.
	<Jasmine>
	global.wrappers["/Users/caleb/Projects/Code/etro-js/etro/spec/smoke/util.spec.ts"]</compareImageData/</<@spec/smoke/util.spec.ts:46:20 <- spec/smoke/util.spec.js:88:38
	step@spec/smoke/util.spec.js:33:23
	global.wrappers["/Users/caleb/Projects/Code/etro-js/etro/spec/smoke/util.spec.ts"]</__generator</verb/<@spec/smoke/util.spec.js:14:53
	fulfilled@spec/smoke/util.spec.js:5:58
Firefox 121.0 (Mac OS 10.15) Integration Tests -> Effects -> GaussianBlurVertical -> should blur with 5-pixel radius FAILED
	Expected 99.61 to be less than or equal 1.5.
	<Jasmine>
	global.wrappers["/Users/caleb/Projects/Code/etro-js/etro/spec/smoke/util.spec.ts"]</compareImageData/</<@spec/smoke/util.spec.ts:46:20 <- spec/smoke/util.spec.js:88:38
	step@spec/smoke/util.spec.js:33:23
	global.wrappers["/Users/caleb/Projects/Code/etro-js/etro/spec/smoke/util.spec.ts"]</__generator</verb/<@spec/smoke/util.spec.js:14:53
	fulfilled@spec/smoke/util.spec.js:5:58
Firefox 121.0 (Mac OS 10.15) Integration Tests -> Effects -> Pixelate -> should decimate to 3-pixel texels FAILED
	Expected 98.83 to be less than or equal 1.5.
	<Jasmine>
	global.wrappers["/Users/caleb/Projects/Code/etro-js/etro/spec/smoke/util.spec.ts"]</compareImageData/</<@spec/smoke/util.spec.ts:46:20 <- spec/smoke/util.spec.js:88:38
	step@spec/smoke/util.spec.js:33:23
	global.wrappers["/Users/caleb/Projects/Code/etro-js/etro/spec/smoke/util.spec.ts"]</__generator</verb/<@spec/smoke/util.spec.js:14:53
	fulfilled@spec/smoke/util.spec.js:5:58
Firefox 121.0 (Mac OS 10.15) Integration Tests -> Effects -> Shader -> should not change the target if no arguments are passed FAILED
	Expected 85.55 to be less than or equal 1.5.
	<Jasmine>
	global.wrappers["/Users/caleb/Projects/Code/etro-js/etro/spec/smoke/util.spec.ts"]</compareImageData/</<@spec/smoke/util.spec.ts:46:20 <- spec/smoke/util.spec.js:88:38
	step@spec/smoke/util.spec.js:33:23
	global.wrappers["/Users/caleb/Projects/Code/etro-js/etro/spec/smoke/util.spec.ts"]</__generator</verb/<@spec/smoke/util.spec.js:14:53
	fulfilled@spec/smoke/util.spec.js:5:58
Firefox 121.0 (Mac OS 10.15) Integration Tests -> Effects -> Stack -> should be the same as applying individual effects FAILED
	Expected 93.36 to be less than or equal 1.5.
	<Jasmine>
	global.wrappers["/Users/caleb/Projects/Code/etro-js/etro/spec/smoke/util.spec.ts"]</compareImageData/</<@spec/smoke/util.spec.ts:46:20 <- spec/smoke/util.spec.js:88:38
	step@spec/smoke/util.spec.js:33:23
	global.wrappers["/Users/caleb/Projects/Code/etro-js/etro/spec/smoke/util.spec.ts"]</__generator</verb/<@spec/smoke/util.spec.js:14:53
	fulfilled@spec/smoke/util.spec.js:5:58
Firefox 121.0 (Mac OS 10.15) Integration Tests -> Effects -> Contrast -> should change the contrast FAILED
	Expected 100 to be less than or equal 1.5.
	<Jasmine>
	global.wrappers["/Users/caleb/Projects/Code/etro-js/etro/spec/smoke/util.spec.ts"]</compareImageData/</<@spec/smoke/util.spec.ts:46:20 <- spec/smoke/util.spec.js:88:38
	step@spec/smoke/util.spec.js:33:23
	global.wrappers["/Users/caleb/Projects/Code/etro-js/etro/spec/smoke/util.spec.ts"]</__generator</verb/<@spec/smoke/util.spec.js:14:53
	fulfilled@spec/smoke/util.spec.js:5:58
............................
Firefox 121.0 (Mac OS 10.15) Integration Tests -> Effects -> ChromaKey -> should remove a color from the target FAILED
	Expected 88.28 to be less than or equal 1.5.
	<Jasmine>
	global.wrappers["/Users/caleb/Projects/Code/etro-js/etro/spec/smoke/util.spec.ts"]</compareImageData/</<@spec/smoke/util.spec.ts:46:20 <- spec/smoke/util.spec.js:88:38
	step@spec/smoke/util.spec.js:33:23
	global.wrappers["/Users/caleb/Projects/Code/etro-js/etro/spec/smoke/util.spec.ts"]</__generator</verb/<@spec/smoke/util.spec.js:14:53
	fulfilled@spec/smoke/util.spec.js:5:58
Firefox 121.0 (Mac OS 10.15) Integration Tests -> Effects -> Brightness -> should change the brightness FAILED
	Expected 31.25 to be less than or equal 1.5.
	<Jasmine>
	global.wrappers["/Users/caleb/Projects/Code/etro-js/etro/spec/smoke/util.spec.ts"]</compareImageData/</<@spec/smoke/util.spec.ts:46:20 <- spec/smoke/util.spec.js:88:38
	step@spec/smoke/util.spec.js:33:23
	global.wrappers["/Users/caleb/Projects/Code/etro-js/etro/spec/smoke/util.spec.ts"]</__generator</verb/<@spec/smoke/util.spec.js:14:53
	fulfilled@spec/smoke/util.spec.js:5:58
Firefox 121.0 (Mac OS 10.15) Integration Tests -> Effects -> Channels -> should multiply each channel by a constant FAILED
	Expected 42.19 to be less than or equal 1.5.
	<Jasmine>
	global.wrappers["/Users/caleb/Projects/Code/etro-js/etro/spec/smoke/util.spec.ts"]</compareImageData/</<@spec/smoke/util.spec.ts:46:20 <- spec/smoke/util.spec.js:88:38
	step@spec/smoke/util.spec.js:33:23
	global.wrappers["/Users/caleb/Projects/Code/etro-js/etro/spec/smoke/util.spec.ts"]</__generator</verb/<@spec/smoke/util.spec.js:14:53
	fulfilled@spec/smoke/util.spec.js:5:58
Firefox 121.0 (Mac OS 10.15): Executed 58 of 58 (10 FAILED) (16.096 secs / 16.177 secs)
..........