Skip to content

Dialog backdrop not matching Fluent React #183

Description

@gabbsmo

Describe the bug
The backdrop for modal dialogs is not matching Fluent UI and is using browser defaults. In Microsoft Edge this means that the background is distorted rather than darkened.

To Reproduce
Steps to reproduce the behavior:

  1. Go to Style Guide
  2. Compare with Fluent React

Expected behavior
The backdrop should match Fluent React

Desktop (please complete the following information):

  • OS: Windows 11
  • Browser: Edge
  • Version: 147

Additional context
The following style can be used as a workaround in your own CSS.

.hoo-dlg::backdrop {
    background: var(--blackTranslucent40);
    backdrop-filter: none;
}

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions