Add restriction warning when embedding a page with this library in iframe due to security policy for Mozilla Firefox (anti-fingerprinting)

Hi, great component.

Unfortunately trying the demo I get WEBGL_UNSUPPORTED whereas https://webglreport.com/?v=1 or v=2 gives me

Linux x86_64 Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:89.0) Gecko/20100101 Firefox/89.0
WebGL GLSL ES 3.00
GeForce RTX 2080 Ti/PCIe/SSE2

and https://get.webgl.org gives me a rotating cube.

Hi, thank you for your report. I am unsure why that would be the case and it will require some investigation.
My initial thinking is that the WebGL context crashes because it is forced in 'high-performance' mode (which indicates to the browser that it should use the most powerful GPU available on the system). Safari 12 was experiencing similar issues.

detect-gpu/src/internal/getWebGLContext.ts

Lines 17 to 25 in 1c3d24d

    
             powerPreference: 'high-performance', 
        
             stencil: false, 
        
           }; 
        
           // Workaround for Safari 12, which otherwise crashes with powerPreference set 
        
           // to high-performance: https://github.com/pmndrs/detect-gpu/issues/5 
        
           if (isSafari12) { 
        
             delete attributes.powerPreference; 
        
           }

If there is a page with and without high performance happy to test there and report back.

FWIW I did test with the WebGL cube precisely because sometimes, silently, WebGL craches but that's usually browser-wide, meaning if one tab fails, others do. Here specifically one WebGL tab worked while I had this error.

At the moment we don't support overriding this option manually in the constructor so I think this is something we might have to introduce and then I can prepare a way for you so you can test this properly in the near future.

For now could you use possibly https://jdashg.github.io/misc/webgl/low-power.html, this should determine if the powerpreference option is the cause of the crash.

{"powerPreference":"low-power"}
  => GeForce RTX 2080 Ti/PCIe/SSE2

{}
  => GeForce RTX 2080 Ti/PCIe/SSE2

{"powerPreference":"high-performance"}
  => GeForce RTX 2080 Ti/PCIe/SSE2

Could you try again with https://pmndrs.github.io/detect-gpu/ and if there are any errors thrown in the console report them please (including the rendered snippet)? It could possibly have something to do with iframing in the sandbox.

{
  "fps": 403,
  "gpu": "nvidia geforce rtx 2080 ti rev. a",
  "isMobile": false,
  "tier": 3,
  "type": "BENCHMARK"
}

It could possibly have something to do with iframing in the sandbox.

In that case we could detect it beforehand and log a error/warning.

	powerPreference: 'high-performance',
	stencil: false,
	};

	// Workaround for Safari 12, which otherwise crashes with powerPreference set
	// to high-performance: https://github.com/pmndrs/detect-gpu/issues/5
	if (isSafari12) {
	delete attributes.powerPreference;
	}