1987855 - app.paper.design - Firefox is not supported

Status: NEW

(Web Compatibility :: Site Reports, defect, P2)

Description

[Raul Bucata]

Environment:
Operating system: Linux
Firefox version: Firefox 142.0

Steps to reproduce:

1. Navigate to: https://app.paper.design/playground/heatmap
2. Observe

Expected Behavior:
Page loads

Actual Behavior:
Browser unsupported message blocks access

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in firefox-nightly, and firefox-release
• Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/176279

Comment 1

[BugBot [:suhaib / :marco]]

Since nightly and release are affected, beta will likely be affected too.
For more information, please visit BugBot documentation.

Comment 2

[Ksenia Berezina [:ksenia]]

I'm able to bypass the blocking screen when using UA string override, however the apple logo in the demo section is not rendered and I'm getting an error:

Unable to initialize the shader program: Uniform u_imageAspectRatio is not linkable between attached shaders.

This appears to be caused by the difference in u_imageAspectRatio uniform precision in vertex and fragment shaders.

Vertex:

XCe =  #version 300 es
precision mediump float;
...
uniform float u_imageAspectRatio;

Fragment:

R4e = #version 300 es
precision highp float;
....
uniform float u_imageAspectRatio;

When the same uniform name is declared in both shaders with no per-variable precision, it inherits the stage defaults and it must match in type and precision, but here the two are mismatched (mediump and highp), so the error makes sense.
It appears that while u_imageAspectRatio is defined in the fragment shader, it's not actually used. So the difference here is that Chrome seems to prune the unused fragment-side uniform and links successfully while Firefox won’t link even when the uniform is unused.

If I replace the u_imageAspectRatio precision with highp for both shaders, the logo loads and I'm able to use controls on the right to adjust animation parameters:

    const fixAspect = (src) =>
        src.replace(
            /\buniform\s+(?:(?:lowp|mediump|highp)\s+)?float\s+u_imageAspectRatio\b/g,
            `uniform highp float u_imageAspectRatio`
        );

    t = fixAspect(t);
    n = fixAspect(n);

The site could remove the declaration of u_imageAspectRatio from the fragment shader to fix the problem.
This won't be trivial to site patch and given the unsupported block there could be other issues, so the best course of action is to contact them.

I'll file a separate bug for the difference in Chrome and Firefox behaviour in case it worth further investigation.

Comment 3

[Ksenia Berezina [:ksenia]]

I've filed bug1998542, but looks like the site has changed and the error is not reproducible anymore. I tried to use the app with the Chrome mask in Firefox and don't see any issues/ differences from Chrome. Will try to reach out to someone from https://github.com/paper-design on GitHub to see if there are any specific known problems preventing Firefox support.