Dialog background color inconsistent

[ulickvarange]

Describe the issue

For some reason, the backdrop background color for dialog is slightly different when the page is loaded and it has the open attribute.

Current Behavior

In this video, the dialog without the input error was opened via Javascript. The dialog with the input error was opened on page load with the open attribute in the HTML.

Screen.Recording.2024-06-15.at.9.23.21.AM.mov

Expected Behavior

I expect the backdrop background color to be the same irregardless of the open attribute presence on page load.

Environment

Mac Chrome and Safari.

[AndrewCrescencio]

I don't know if it has something to do with it, but I was looking at the picocss documentation and the examples use the open property in the dialog.

open
Indicates that the dialog box is active and is available for interaction. If the open attribute is not set, the dialog box will not be visible to the user. It is recommended to use the .show() or .showModal() method to render dialogs, rather than the open attribute. If a is opened using the open attribute, it is non-modal.

also:
The CSS ::backdrop pseudo-element can be used to style the backdrop of a modal dialog, which is displayed behind the element when the dialog is displayed using the HTMLDialogElement.showModal() method. For example, this pseudo-element could be used to blur, darken, or otherwise obfuscate the inert content behind the modal dialog.