[Bug]: In macOS, animations rendered in gif or threejs always leave a white semi-transparent background

[SorryToPerson]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for a bug report that matches the one I want to file, without success.

Electron Version

29.1.5

What operating system are you using?

macOS

Operating System Version

Sonama 14

What arch are you using?

arm64 (including Apple Silicon)

Last Known Working Electron version

29.1.5

Expected Behavior

be able to render animations or gif images normally

Actual Behavior

When I use electron to build an application, I want to create a transparent, animated character with actions, to be displayed on the desktop for a long time as an assistant image. But whether using gif or threejs rendering, there is always a semi-transparent white background of historical actions on the Mac computer, which is very frustrating.

Testcase Gist URL

https://gist.github.com/SorryToPerson/0b489bc47738fb0bbcbaca29e2482536

Additional Information

When I use electron to build an application, I want to create a transparent, animated character with actions, to be displayed on the desktop for a long time as an assistant image. But whether using gif or threejs rendering, there is always a semi-transparent white background of historical actions on the Mac computer, which is very frustrating.

[michi88]

I Think have an issue that sounds a bit similar. I'm making a transparent window (full workarea overlay) that has some UI that updates (screen selection rectangle). I also see an issue that older states seem to 'stay' half transparent on the screen. I've tried a lot to fix this (in the frontend rendering app, in my case vue) but I actually think this might be a chrome bug.
I did read some people saying when hardware acceleration is turned off, that it works for them (the UI renders correctly and leaves no artifacts)
Maybe you can try that and see if it makes a difference in your case.

[SorryToPerson]

I Think have an issue that sounds a bit similar. I'm making a transparent window (full workarea overlay) that has some UI that updates (screen selection rectangle). I also see an issue that older states seem to 'stay' half transparent on the screen. I've tried a lot to fix this (in the frontend rendering app, in my case vue) but I actually think this might be a chrome bug.
I did read some people saying when hardware acceleration is turned off, that it works for them (the UI renders correctly and leaves no artifacts)
Maybe you can try that and see if it makes a difference in your case.

I tried to turn off hardware acceleration, but it didn't work. This problem only exists on macOS, and both gif and webGL rendering have this issue.

I originally wanted to achieve the functionality of virtual desktop animated characters similar to the AI0x0 project, but I didn't implement the corresponding functionality and I'm not sure what technology he used.