diff --git a/browser/themes/shared/tabbrowser/content-area.css b/browser/themes/shared/tabbrowser/content-area.css
index 3acdec2b8e043fe27919cfa54e73f4d3c491bfc8..267a1087134464a8193a824a2d7f8ac15ff8ad60 100644
--- a/browser/themes/shared/tabbrowser/content-area.css
+++ b/browser/themes/shared/tabbrowser/content-area.css
@@ -157,7 +157,6 @@
   min-height: 0;
 
   /* We want to be able to show the frame color behind the clipped radiused corner */
-  background: var(--tabpanel-background-color);
 
   @media -moz-pref("sidebar.revamp") {
     outline: 0.01px solid var(--chrome-content-separator-color);
@@ -216,7 +215,6 @@
   }
 
   browser:is([blank], [pendingpaint]) {
-    opacity: 0;
   }
 
   /* Exclude browsers with smartwindow-content attribute which inherit
@@ -553,7 +551,7 @@ split-view-footer {
 
 .dialogStack {
   z-index: var(--browser-stack-z-index-dialog-stack);
-  position: absolute;
+  position: fixed;
   inset: 0;
   /* --browser-with-dialog set on browser[tabDialogShowing], we want to position the overlay
      only on the top of the <browser> element so it doesn't overlap the DevTools toolbox */
@@ -718,7 +716,7 @@ split-view-footer {
 
 .dialogOverlay[topmost="true"],
 #window-modal-dialog::backdrop {
-  background-color: var(--background-color-overlay);
+  background-color: light-dark(rgba(255, 255, 255, .3), rgba(0, 0, 0, .3));
 }
 
 .dialogOverlay[hideContent="true"][topmost="true"] {
