[Bug]: Inconsistent CSS Styling Between Electron Versions

[ezrichards]

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

22.0.0

What operating system are you using?

macOS

Operating System Version

macOS Monterey

What arch are you using?

x64

Last Known Working Electron version

20.3.8

Expected Behavior

I expect my program to have a few div elements that are draggable via jQuery, with no background to the div elements. The body should use the background-color defined in CSS.

Actual Behavior

My program has all of the correct div elements that are draggable, but they each have a slight (low opacity) square background behind each them, which is not intentional. From what I can see, there are no styles being added by Electron.

Testcase Gist URL

https://gist.github.com/fabc5a22baf33ea0d18c7fffaed797a9

Additional Information

I originally wrote this site in plain old HTML/CSS/JS, and then I put it in an Electron app, where I noticed this background thing start to happening. After playing around with Electron Fiddle versions, it seems like the expected behavior (no background between divs) last works in Electron v20.3.8.

Curiously, while this background issue does happen, the draggable divs create boxes of all equal size which are highlighted depending on where the div element was dragged. Again, this is not intentional, but it looks like Electron may have some debugging mode enabled or perhaps somehow it thinks I'm selecting the div?

Thank you!

[ezrichards]

After further investigation, and as mentioned in #10732, I found this snippet:
app.commandLine.appendSwitch('disable-color-correct-rendering');

This seems to properly disable any shadows that happen in the body and fixes the issue. However, this color is just a little different from what is displayed in normal HTML (whether in Safari or Chrome, which both display the same color, but different from what Electron is displaying).

This will suffice for my purposes, but I'm still interested to hear what the developers have to say, because as a result of #10732, this was supposedly fixed. I'm not sure if these are entirely separate issues or not.

[codebytere]

@ezrichards this is unfortunately a result of upstream issue (https://crbug.com/634542 and https://crbug.com/711107) - it's likely it won't be fully fixed until Chromium themselves handles it and we inherit their fix.