Modal unnecessarily animates on less performant CSS property (background-color)

[imp-dance]

Environment

Operating system

Qubes OS (but affects all)

Browser

Firefox ESR (but affects all)

Detailed description

What version of the Carbon Design System are you using?

^10.27.0

What did you expect to happen?

For modals to animate smoothly on all screen sizes

What happened instead?

Modal animations are unnecessarily choppy and unreliable. When seeing the animation on very large screens (5120x1440) it tips over a point where it affects usability - since the animation can take up to ~3 seconds to finish animate - in a choppy rate.

What WCAG 2.1 checkpoint does the issue violate?

Less of an accessibility issue, more of a usability issue.

Steps to reproduce the issue

1. Mount a modal with a trigger
2. Try to open the modal
3. Notice how the animation might run choppy on large displays or on less performant devices.

Additional information

Proposed solution: Set the background-color property on .bx--modal to be rgba(22,22,22,0.5) ($overlay), remove the background-color transition and just keep the opacity transition. This way the only thing animating will be opacity, which will run a lot more smoothly. Generally you want mostly transition/animate the opacity and transform properties, for performance reasons.