Description
Component
Dialog
Package version
9.66
React version
18.2.0
Environment
Browser environment.
Sorry for lack of details. I tried to run the code snippet above but got a 401 error: "Incorrect or missing password."Current Behavior
Hello!
As mentioned in today's Office Hours call, I have noticed that the backdrop animation behaves in a rather laggy way when opening a Fluent UI dialog.
This is a bit disappointing. I love having an animated backdrop (which the dialog didn't have in previous versions), but the current solution is just a bit jarring on the eyes. I am also concerned that because my team's web app has a lot of different dialogs in it, our users must be having the same issue on multiple pages.
The workaround that I've found is to use the "non-modal" dialog type, but that's not really intended behavior, and involves getting rid of the backdrop entirely, rather than just improving its animation.
That's all I have to say, really 🙂 I realize that "why so slow? fix plz" is not very helpful feedback, but during the office hours it seemed like my issue was reproducible for others in the call. Please let me know if I should add anything else!
Expected Behavior
The backdrop animation should behave in the "super smooth native CSS" way as described in the office hours call 🙂
Reproduction
https://react.fluentui.dev/?path=/docs/components-dialog--docs
Steps to reproduce
- Go to the Fluent UI docs (https://react.fluentui.dev/?path=/docs/components-dialog--docs)
- Scroll down to the first option ("Default dialog")
- Click "Open in Stackblitz"
- Wait for Stackblitz to load
- Open the dialog. Notice that the backdrop is laggy.
The same lagginess is present for me on the Fluent UI documentation website. It is also present in my production web app.
Are you reporting an Accessibility issue?
None
Suggested severity
Medium - Has workaround
Products/sites affected
No response
Are you willing to submit a PR to fix?
no
Validations
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- The provided reproduction is a minimal reproducible example of the bug.