Edge default ANGLE graphics backend is glitchy

Question

I am running the latest version of Windows 11 and using the latest version of Microsoft Edge (although I have confirmed that the bug also happens on both older versions of Windows 11 and Edge as well).

Here is my GPU information:

GPU 0

	AMD Radeon(TM) Graphics

	Driver version:	31.0.12044.3
	Driver date:	10/25/2022
	DirectX version:	12 (FL 12.1)
	Physical location:	PCI bus 5, device 0, function 0

	Utilization	1%
	Dedicated GPU memory	1.0/2.0 GB
	Shared GPU memory	0.2/2.9 GB
	GPU Memory	1.2/4.9 GB

When I attempt to run the following WebGL program I get a glitchy effect where black boxes appear on the screen when they should not: https://www.khanacademy.org/computer-programming/i/5092844918587392. You can see in the two attached images that in one image there is the black static compared to the image of how it should look.
It is not an issue with Khan Academy's execution environment because when I copy the code and run it locally the same effect happens. I talked to the author of the program and he thought it might be the anti-aliasing or a precision error, but after testing neither seemed to be the case.

I ran what tests I was able to see when this bug appears.

Windows 10 + Chrome + Intel UHD Graphics 620 = OK
Windows 10 + Edge + Intel UHD Graphics 620 = OK
Windows 10 + Chromium + Intel UHD Graphics 620 = OK
Windows 11 + Electron (Chromium) + AMD Radeon Graphics = BUGGY
Windows 11 + Edge + AMD Radeon Graphics = BUGGY

Later a friend suggested that I try messing around with my browser flags to see if that could fix the issue. I looked through the GPU related browser flags and found the "Choose ANGLE graphics backend" which was set to "Default". The options were "Default", "OpenGL", "D3D11", "D3D9", and "D3D11on12".

I tested each option and got the following results:

Default is glitchy (i don't know what the default is though)
OpenGL has the glitch effect
D3D11 has the glitch effect
D3D9 shows a completely blank canvas
D3D11onD12 runs completely normally without any glitch effect

Setting the backend to D3D11onD12 seemed to fix the problem for me, but I shouldn't have to manually set the graphics backend in Edge. "Default" ought to just work as most users aren't tech savvy enough to set the graphics backend themselves like me. I don't know why the graphics backend makes a difference here or why Edge failed to default to the correct one. Maybe Edge's developers would know.

Unfortunately due to parental controls I cannot test Firefox, but given that the issue appears in both Edge and Chromium and that Edge is based on Chromium I would assume that it's a Chromium issue that Edge happened to inherit.

Hopefully either Edge's or Chromium's developers can fix it so that the browser picks the correct graphics backend by default so that other users don't have to go through the headbanging I did.

Answer 1

Hello Vincent,

Thank you for your question and for reaching out with your question today.

It appears that you have identified a bug in Microsoft Edge (Chromium-based) and possibly Chromium itself regarding the rendering of WebGL programs on Windows 11 with AMD Radeon Graphics. You have also found a workaround by manually setting the graphics backend to D3D11onD12, which resolves the glitchy effect.

While I can understand your frustration, as an AI language model, I don't have direct contact with the developers of Edge or Chromium. However, I can suggest a couple of steps you can take to report this issue and potentially help the developers address it:

1. Provide Feedback: Within Microsoft Edge, you can go to the "..." menu in the top-right corner, select "Help and feedback," and then choose "Send feedback" to submit a bug report. Describe the issue, provide the steps to reproduce it, and include your system information. This feedback will be valuable for the Edge development team.
2. Visit the Chromium Bug Tracker: Chromium has an issue tracker where you can search for existing bug reports or submit a new one. Visit the Chromium bug tracker website (**************************) and search for similar issues. If you don't find a matching report, you can create a new one with the details you've provided here.

When reporting the bug, include the following information:

• Detailed description of the issue, including the glitchy effect and the specific WebGL program that triggers it.
• Mention that the issue occurs on Windows 11 with AMD Radeon Graphics.
• Provide your GPU information, including the driver version and DirectX version.
• Mention the workaround you discovered by setting the graphics backend to D3D11onD12.
• Include any relevant screenshots or video recordings demonstrating the problem.
• Mention that the issue occurs in both Microsoft Edge and Chromium.

By reporting the issue through these channels, you can bring it to the attention of the respective development teams, who may be able to investigate and address the problem in future updates.

It's worth noting that software bugs can be complex, and the resolution time can vary. Patience and continued communication with the developers will be key in helping them understand and fix the issue.

In the meantime, if the workaround of setting the graphics backend to D3D11onD12 resolves the problem for you, you can continue using it as a temporary solution until the bug is addressed.

I used AI provided by ChatGPT to formulate part of this response. I have verified that the information is accurate before sharing it with you.

If the reply was helpful, please don’t forget to upvote or accept as answer.