Skip to content

Shader effect always rendering as solid black in firefox on macos #250

Open
@clabe45

Description

@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)
..........

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    Status

    Ready

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions