diff --git a/ui/webui/resources/cr_elements/cr_tabs/cr_tabs.html b/ui/webui/resources/cr_elements/cr_tabs/cr_tabs.html
index c0b077d19ded..886bd09c282b 100644
--- a/ui/webui/resources/cr_elements/cr_tabs/cr_tabs.html
+++ b/ui/webui/resources/cr_elements/cr_tabs/cr_tabs.html
@@ -74,7 +74,7 @@
     </style>
     <template is="dom-repeat" items="[[tabNames]]"
         on-dom-change="updateSelectionBar_">
-      <div class$="tab [[getCssClass_(index, selected)]]" role="tab"
+      <div class="tab" role="tab"
           aria-selected$="[[getAriaSelected_(index, selected)]]"
           tabindex$="[[getTabIndex_(index, selected)]]" on-click="onTabClick_">
         [[item]]
diff --git a/ui/webui/resources/cr_elements/cr_tabs/cr_tabs.js b/ui/webui/resources/cr_elements/cr_tabs/cr_tabs.js
index 67bf891fc8b2..c94b3d1e7278 100644
--- a/ui/webui/resources/cr_elements/cr_tabs/cr_tabs.js
+++ b/ui/webui/resources/cr_elements/cr_tabs/cr_tabs.js
@@ -57,10 +57,6 @@ Polymer({
   /** @override */
   attached: function() {
     this.isRtl_ = this.matches(':host-context([dir=rtl]) cr-tabs');
-    // When handling the initial 'dom-change' event, it's possible for the
-    // selected tab to exist and not yet be fully rendered. This will result in
-    // the selection bar not rendering correctly.
-    setTimeout(() => this.updateSelectionBar_());
   },

   /**
@@ -72,15 +68,6 @@ Polymer({
     return this.selected == index ? 'true' : 'false';
   },

-  /**
-   * @param {number} index
-   * @return {string}
-   * @private
-   */
-  getCssClass_: function(index) {
-    return this.selected == index ? 'selected' : '';
-  },
-
   /**
    * @param {number} index
    * @return {number}
@@ -135,25 +122,40 @@ Polymer({
   },

   /** @private */
-  updateSelectionBar_: function() {
-    const selectedTab = this.$$('.selected');
-    if (!selectedTab) {
+  updateSelectionBar_: function(current, previous) {
+    const tabs = this.shadowRoot.querySelectorAll('.tab');
+
+    if (tabs.length === 0) {
+      // The dom-repeat has not been rendered yet. Do nothing here.
+      // |onDomChange_| event will re-trigger this when ready.
       return;
     }

+    tabs.forEach((tab, i) => {
+      tab.classList.toggle('selected', i === this.selected);
+    });
+
+    const selectedTab = this.$$('.selected');
     selectedTab.focus();
     this.$.selectionBar.classList.remove('expand', 'contract');
-    const {offsetLeft: selectedLeft, offsetWidth: selectedWidth} = selectedTab;
     const oldValue = this.lastSelected_;
     this.lastSelected_ = this.selected;

     // If there is no previously selected tab or the tab has not changed,
     // underline the selected tab instantly.
     if (oldValue == null || oldValue == this.selected) {
-      this.transformSelectionBar_(selectedLeft, selectedWidth);
+      // When handling the initial 'dom-change' event, it's possible for the
+      // selected tab to exist and not yet be fully rendered. This will result in
+      // the selection bar not rendering correctly.
+      window.setTimeout(() => {
+        this.transformSelectionBar_(
+            selectedTab.offsetLeft, selectedTab.offsetWidth);
+      }, 0);
       return;
     }

+    const {offsetLeft: selectedLeft, offsetWidth: selectedWidth} = selectedTab;
+
     // Expand bar to underline the last selected tab, the newly selected tab and
     // everything in between. After expansion is complete, contract bar to
     // underline the selected tab.