diff --git a/static/css/theme.css b/static/css/theme.css
index 0e62ac0d08..88555a6903 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1951,8 +1951,11 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
     padding: 1rem;
 }
 
-/* remove margin if only a single code block is contained in the tab */
-#body .tab-content.tab-panel-style.code > .tab-content-text{
+/* remove margin if only a single code block is contained in the tab (FF without :has using .codify style) */
+#body .tab-content.tab-panel-style.codify > .tab-content-text{
+    padding: 0;
+}
+#body .tab-content-text:has(> div.highlight:only-child){
     padding: 0;
 }
 
diff --git a/static/css/variant.css b/static/css/variant.css
index 33cb2798a3..48dde02b9c 100644
--- a/static/css/variant.css
+++ b/static/css/variant.css
@@ -411,7 +411,7 @@ article ul > li > input[type="checkbox"] {
 }
 
 .tab-panel-style.cstyle.transparent {
-    --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
+    --VARIABLE-BOX-color: rgba( 134, 134, 134, .4 );
     --VARIABLE-BOX-BG-color: transparent;
 }
 
diff --git a/static/js/theme.js b/static/js/theme.js
index 9c4b11b013..6e8be86b12 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -67,18 +67,22 @@ function adjustContentWidth(){
 
 function fixCodeTabs(){
     /* if only a single code block is contained in the tab and no style was selected, treat it like style=code */
-    var codeTabPanels = Array.from( document.querySelectorAll( '.tab-content.tab-panel-style.initial' ) ).filter( function( tabPanel ){
+    var codeTabPanels = Array.from( document.querySelectorAll( '.tab-content.tab-panel-style' ) ).filter( function( tabPanel ){
         return tabPanel.querySelector( '.tab-content-text > div.highlight:only-child, .tab-content-text > pre.pre-code:only-child');
     });
 
     codeTabPanels.forEach( function( tabPanel ){
-        tabPanel.classList.remove( 'initial' );
-        tabPanel.classList.add( 'code' );
-        tabId = tabPanel.dataset.tabItem;
         var p = tabPanel.parentNode.parentNode;
+        var tabId = tabPanel.dataset.tabItem;
         var tabButton = p.querySelector( '.tab-nav-button.tab-panel-style[data-tab-item="'+tabId+'"]' );
-        tabButton.classList.remove( 'initial' );
-        tabButton.classList.add( 'code' );
+        if( tabPanel.classList.contains( 'initial' ) ){
+            tabButton.classList.remove( 'initial' );
+            tabButton.classList.add( 'code' );
+            tabPanel.classList.remove( 'initial' );
+            tabPanel.classList.add( 'code' );
+        }
+        // mark code blocks for FF without :has()
+        tabPanel.classList.add( 'codify' );
     });
 }