diff --git a/browser/base/content/tabbrowser.css b/browser/base/content/tabbrowser.css
index 69f7ceab8f45..5a382c8ee14d 100644
--- a/browser/base/content/tabbrowser.css
+++ b/browser/base/content/tabbrowser.css
@@ -51,14 +51,14 @@
   width: 0;
 }
 
-.tab-label-container[textoverflow][dir=ltr]:not([pinned]),
-.tab-label-container[textoverflow]:not([dir]):not([pinned]):-moz-locale-dir(ltr) {
+.tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
+.tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
   direction: ltr;
   mask-image: linear-gradient(to left, transparent, black 2em);
 }
 
-.tab-label-container[textoverflow][dir=rtl]:not([pinned]),
-.tab-label-container[textoverflow]:not([dir]):not([pinned]):-moz-locale-dir(rtl) {
+.tab-label-container[textoverflow][labeldirection=rtl]:not([pinned]),
+.tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(rtl) {
   direction: rtl;
   mask-image: linear-gradient(to right, transparent, black 2em);
 }
diff --git a/browser/base/content/tabbrowser.xml b/browser/base/content/tabbrowser.xml
index 6ef8052f3b4f..d7f48872a143 100644
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -1549,7 +1549,7 @@
             let isRTL = dwu.getDirectionFromText(aLabel) == Ci.nsIDOMWindowUtils.DIRECTION_RTL;
 
             aTab.setAttribute("label", aLabel);
-            aTab.setAttribute("dir", isRTL ? "rtl" : "ltr");
+            aTab.setAttribute("labeldirection", isRTL ? "rtl" : "ltr");
             aTab._labelIsContentTitle = aOptions && aOptions.isContentTitle;
 
             // Dispatch TabAttrModified event unless we're setting the label
@@ -7271,7 +7271,7 @@
                      class="tab-icon-overlay"
                      role="presentation"/>
           <xul:hbox class="tab-label-container"
-                    xbl:inherits="pinned,selected=visuallyselected,dir"
+                    xbl:inherits="pinned,selected=visuallyselected,labeldirection"
                     onoverflow="this.setAttribute('textoverflow', 'true');"
                     onunderflow="this.removeAttribute('textoverflow');"
                     flex="1">