Fix DialogModal rendering issues.

src/components/containers/Dialog/Dialog.module.scss

@@ -14,6 +14,8 @@
     --bk-dialog-padding-block: #{bk.$spacing-8};
     --bk-dialog-padding-inline: #{bk.$spacing-8};
 
+    overflow: hidden;
+
     // The default `auto` inherits from the parent, which we do not want. In the future if `contain: user-select`
     // becomes supported, we could use that instead.
     user-select: text;

src/components/overlays/DialogModal/DialogModal.module.scss

@@ -25,7 +25,12 @@
   // Exit transition styling
   // Note: cannot nest the following inside `::backdrop`, since `:not()` needs to apply to the dialog not `::backdrop`
   &:not([open])::backdrop {
-    @media (prefers-reduced-motion: no-preference) { transition-duration: $exit-dur; }
+    transition-duration: 0ms;
+    @supports (overlay: auto) { // Only in supported browsers
+      @media (prefers-reduced-motion: no-preference) {
+        transition-duration: $exit-dur;
+      }
+    }
     background-color: transparent;
     backdrop-filter: blur($blur) opacity(0);
   }
@@ -49,7 +54,12 @@
   // Exit transition styling
   // Note: cannot nest the following inside `::backdrop`, since `:not()` needs to apply to the dialog not `::backdrop`
   &:not([open])::backdrop {
-    @media (prefers-reduced-motion: no-preference) { transition-duration: $exit-dur; }
+    transition-duration: 0ms;
+    @supports (overlay: auto) { // Only in supported browsers
+      @media (prefers-reduced-motion: no-preference) {
+        transition-duration: $exit-dur;
+      }
+    }
     background-color: transparent;
   }
 }
@@ -72,7 +82,12 @@
 
   // Exit transition styling
   &:not([open]) {
-    @media (prefers-reduced-motion: no-preference) { transition-duration: $exit-dur; }
+    transition-duration: 0ms;
+    @supports (overlay: auto) { // Only in supported browsers
+      @media (prefers-reduced-motion: no-preference) {
+        transition-duration: $exit-dur;
+      }
+    }
     transition-timing-function: ease-in;
     opacity: 0;
     scale: calc(1 - (($scale - 1) * 0.2)); // Multiply by 0.2 to make the scale out effect a bit more subtle
@@ -102,7 +117,12 @@
 
   // Exit transition styling
   &:not([open]) {
-    @media (prefers-reduced-motion: no-preference) { transition-duration: $exit-dur; }
+    transition-duration: 0ms;
+    @supports (overlay: auto) { // Only in supported browsers
+      @media (prefers-reduced-motion: no-preference) {
+        transition-duration: $exit-dur;
+      }
+    }
     transition-timing-function: ease-in;
     translate: calc($dir * $size * 100vi) 0;
   }
@@ -117,6 +137,8 @@
     --bk-dialog-modal-exit-dur: 180ms;
     --bk-dialog-modal-fade-scale: 1;
 
+    overflow: hidden;
+
     // Basic modal positioning
     position: fixed;
     inset: 0;

src/components/util/Dialog/useModalDialog.ts

@@ -146,6 +146,8 @@ export const useModalDialog = (
     }
 
     if (allowUserClose && shouldCloseOnBackdropClick && isClickOnBackdrop) {
+      event.stopPropagation();
+      event.preventDefault();
       controller.deactivate();
     }
   }, [controller, allowUserClose, shouldCloseOnBackdropClick]);

src/styling/global/reset.scss

@@ -58,10 +58,6 @@
     all: unset;
     display: revert;
     box-sizing: border-box;
-
-    // Issue: if the parent has `user-select: none` (e.g. button), then the dialog will inherit this by default.
-    // In the future, if `contain: user-select` is implemented, we could use that instead.
-    user-select: text;
   }
 
   // Re-apply a few sensible defaults for dialogs. For reference, see the default user agent styling rules here:
@@ -70,9 +66,17 @@
     display: block;
     position: static;
 
+    // Issue: if the parent has `user-select: none` (e.g. button), then the dialog will inherit this by default.
+    // In the future, if `contain: user-select` is implemented, we could use that instead.
+    user-select: text;
+
     &:not([open]) {
       display: none;
     }
+
+    &::backdrop {
+      user-select: none; // Without this, clicking on the backdrop selects the dialog text in Firefox
+    }
   }
   /*
   Note: the `:modal` pseudo-class applies when the modal is in the top layer *and* currently open. That means that it