use offsetWidth instead of getBoundingClientRect

It fixes the tab's dimensions when inside a scaled down parent using CSS transform (ex: dialog)
adopted-ember-addons · Aug 4, 2017 · 903fd77 · 903fd77
1 parent 98a79b8
commit 903fd77
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/addon/components/paper-tab.js b/addon/components/paper-tab.js
@@ -35,7 +35,7 @@ export default Component.extend(ChildMixin, RippleMixin, FocusableMixin, {
 
   didInsertElement() {
     this._super(...arguments);
-    let { width } = this.element.getBoundingClientRect();
+    let width = this.element.offsetWidth;
     // this is the initial tab width
     // it is used to calculate if we need pagination or not
     this.set('width', width);

diff --git a/addon/components/paper-tabs.js b/addon/components/paper-tabs.js
@@ -121,8 +121,8 @@ export default Component.extend(ParentMixin, ColorMixin, {
   },
 
   updateDimensions() {
-    let { width: canvasWidth } = this.element.querySelector('md-tabs-canvas').getBoundingClientRect();
-    let { width: wrapperWidth } = this.element.querySelector('md-pagination-wrapper').getBoundingClientRect();
+    let canvasWidth = this.element.querySelector('md-tabs-canvas').offsetWidth;
+    let wrapperWidth = this.element.querySelector('md-pagination-wrapper').offsetWidth;
     this.get('childComponents').invoke('updateDimensions');
     this.set('canvasWidth', canvasWidth);
     this.set('wrapperWidth', wrapperWidth);