search

picocss / pico

Minimal CSS Framework for semantic HTML
https://picocss.com
MIT License
13.63k stars 397 forks source link

Dialog background color inconsistent #565

Open ulickvarange opened 4 months ago

ulickvarange commented 4 months ago

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.

https://github.com/picocss/pico/assets/115958799/dea27de3-1fc3-4d79-a4a8-ad02917172db

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 commented 2 months ago

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.