--- a/browser/components/extensions/ext-browserAction.js
+++ b/browser/components/extensions/ext-browserAction.js
@@ -365,50 +365,53 @@ this.browserAction = class extends Exten
       this.pendingPopupTimeout = null;
     }
   }
 
   // Update the toolbar button |node| with the tab context data
   // in |tabData|.
   updateButton(node, tabData) {
     let title = tabData.title || this.extension.name;
-    node.setAttribute("tooltiptext", title);
-    node.setAttribute("label", title);
+
+    node.ownerGlobal.requestAnimationFrame(() => {
+      node.setAttribute("tooltiptext", title);
+      node.setAttribute("label", title);
 
-    if (tabData.badgeText) {
-      node.setAttribute("badge", tabData.badgeText);
-    } else {
-      node.removeAttribute("badge");
-    }
+      if (tabData.badgeText) {
+        node.setAttribute("badge", tabData.badgeText);
+      } else {
+        node.removeAttribute("badge");
+      }
 
-    if (tabData.enabled) {
-      node.removeAttribute("disabled");
-    } else {
-      node.setAttribute("disabled", "true");
-    }
+      if (tabData.enabled) {
+        node.removeAttribute("disabled");
+      } else {
+        node.setAttribute("disabled", "true");
+      }
 
-    let badgeNode = node.ownerDocument.getAnonymousElementByAttribute(node,
-                                        "class", "toolbarbutton-badge");
-    if (badgeNode) {
-      let color = tabData.badgeBackgroundColor;
-      if (color) {
-        color = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${color[3] / 255})`;
+      let badgeNode = node.ownerDocument.getAnonymousElementByAttribute(node,
+                                          "class", "toolbarbutton-badge");
+      if (badgeNode) {
+        let color = tabData.badgeBackgroundColor;
+        if (color) {
+          color = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${color[3] / 255})`;
+        }
+        badgeNode.style.backgroundColor = color || "";
       }
-      badgeNode.style.backgroundColor = color || "";
-    }
 
-    let {style, legacy} = this.iconData.get(tabData.icon);
-    const LEGACY_CLASS = "toolbarbutton-legacy-addon";
-    if (legacy) {
-      node.classList.add(LEGACY_CLASS);
-    } else {
-      node.classList.remove(LEGACY_CLASS);
-    }
+      let {style, legacy} = this.iconData.get(tabData.icon);
+      const LEGACY_CLASS = "toolbarbutton-legacy-addon";
+      if (legacy) {
+        node.classList.add(LEGACY_CLASS);
+      } else {
+        node.classList.remove(LEGACY_CLASS);
+      }
 
-    node.setAttribute("style", style);
+      node.setAttribute("style", style);
+    });
   }
 
   getIconData(icons) {
     let baseSize = 16;
     let {icon, size} = IconDetails.getPreferredIcon(icons, this.extension, baseSize);
 
     let legacy = false;
 

--- a/browser/components/extensions/ext-pageAction.js
+++ b/browser/components/extensions/ext-pageAction.js
@@ -102,32 +102,34 @@ this.pageAction = class extends Extensio
     let tabData = this.tabContext.get(window.gBrowser.selectedTab);
 
     if (!(tabData.show || this.buttons.has(window))) {
       // Don't bother creating a button for a window until it actually
       // needs to be shown.
       return;
     }
 
-    let button = this.getButton(window);
+    window.requestAnimationFrame(() => {
+      let button = this.getButton(window);
 
-    if (tabData.show) {
-      // Update the title and icon only if the button is visible.
+      if (tabData.show) {
+        // Update the title and icon only if the button is visible.
 
-      let title = tabData.title || this.extension.name;
-      button.setAttribute("tooltiptext", title);
-      button.setAttribute("aria-label", title);
-      button.classList.add("webextension-page-action");
+        let title = tabData.title || this.extension.name;
+        button.setAttribute("tooltiptext", title);
+        button.setAttribute("aria-label", title);
+        button.classList.add("webextension-page-action");
 
-      let {style} = this.iconData.get(tabData.icon);
+        let {style} = this.iconData.get(tabData.icon);
 
-      button.setAttribute("style", style);
-    }
+        button.setAttribute("style", style);
+      }
 
-    button.hidden = !tabData.show;
+      button.hidden = !tabData.show;
+    });
   }
 
   getIconData(icons) {
     // These URLs should already be properly escaped, but make doubly sure CSS
     // string escape characters are escaped here, since they could lead to a
     // sandbox break.
     let escape = str => str.replace(/[\\\s"]/g, encodeURIComponent);