--- a/devtools/client/framework/components/ToolboxTabs.js
+++ b/devtools/client/framework/components/ToolboxTabs.js
@@ -105,21 +105,26 @@ class ToolboxTabs extends Component {
     return !this.equalToolIdArray(prevPanels, nextPanels);
   }
 
   /**
    * Update the Map of tool id and tool tab width.
    */
   updateCachedToolTabsWidthMap() {
     let thisNode = findDOMNode(this);
+    let utils = window.QueryInterface(Ci.nsIInterfaceRequestor)
+        .getInterface(Ci.nsIDOMWindowUtils);
+    // Force a reflow before calling getBoundingWithoutFlushing on each tab.
+    thisNode.clientWidth;
+
     for (let tab of thisNode.querySelectorAll(".devtools-tab")) {
       let tabId = tab.id.replace("toolbox-tab-", "");
       if (!this._cachedToolTabsWidthMap.has(tabId)) {
-        let cs = getComputedStyle(tab);
-        this._cachedToolTabsWidthMap.set(tabId, parseInt(cs.width, 10));
+        let rect = utils.getBoundsWithoutFlushing(tab);
+        this._cachedToolTabsWidthMap.set(tabId, rect.width);
       }
     }
   }
 
   /**
    * Update the overflowed tab array from currently displayed tool tab.
    * If calculated result is the same as the current overflowed tab array, this
    * function will not update state.
@@ -172,17 +177,17 @@ class ToolboxTabs extends Component {
       this.setState({ overflowedTabIds: willOverflowTabs });
     }
   }
 
   resizeHandler(evt) {
     window.cancelIdleCallback(this._resizeTimerId);
     this._resizeTimerId = window.requestIdleCallback(() => {
       this.updateOverflowedTabs();
-    }, { timeout: 300 });
+    }, { timeout: 100 });
   }
 
   /**
    * Render a button to access overflowed tools, displayed only when the toolbar
    * presents an overflow.
    */
   renderToolsChevronButton() {
     let {