Improve dialog animations on Safari

[HenriqueLimas]

Drawer Dialog and Panel dialogs (sliding from right) animations on Safari browser don't have a consistent change between background colors (from rgba(..., 0) to rgba(..., 0.7)) as the other dialogs. Before the ending of the animation it gets a darker section that goes lighter right after it, as shown in the video bellow.

One suggestion to fix this issue would be to separate the mask as a separate empty div, and using opacity instead of background-color since it doesn't trigger layout changes.

<div class="drawer-dialog drawer-dialog--mask-fade drawer-dialog--js" id="drawer-dialog-1" role="dialog" aria-labelledby="drawer-dialog-title-1" aria-modal="true" hidden="">
    <style>
        .drawer-dialog--show-init .drawer-dialog__mask--fade,
        .drawer-dialog--hide .drawer-dialog__mask--fade {
            opacity: 0;
        }
        
        .drawer-dialog__mask {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-color: var(--dialog-mask-background-color, var(--color-mask-faded, rgba(17, 24, 32, 0.7)));
          	opacity: 1;
          	will-change: opacity;
            transition: opacity 0.16s ease-out;
        }
    </style>
    <div class="drawer-dialog__mask"></div>
</div>