title: getBoundingClientRect() returning wrong width
body: <p>I'm using <code>Angular Material</code> for my grid system. I'm trying to generate an SVG and it is supposed to show me the width of the element, however it is <code>getBoundingClientRect()</code> is returning <code>300px</code> despite the width being <code>618px</code>. I tried it again making my window smaller but it still showed up as <code>300px</code> even though this time it was actually <code>100px</code>.. </p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;div layout="row" layout-wrap layout-padding&gt;
      &lt;div flex="33" ng-repeat="result in ctrl.results"&gt;
          &lt;svg height="100%" width="100%" position&gt;
            &lt;rect x="0" y="0" width="100%" height="100%" fill="#da552f"&gt;&lt;/rect&gt;
            &lt;text fill="#ffffff" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="48" font-family="Verdana"&gt;Hello World&lt;/text&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is my angularjs directive for the <code>position</code> attribute: </p>
  
  <pre><code>var app = angular.module('MainDirective', []);
  
  app.directive('position', function () {
      return {
          restrict: 'A',
          link: function ($scope, element, attrs) {
              var rect = element[0].getBoundingClientRect();
              var text = element.children()[1].getBBox();
              console.log(rect)
          }
      };
  });
  </code></pre>
  
  <p>There is no custom CSS in my project.</p>
  
  <p>Any thoughts why this might be happening? I've tried so many different variations of <code>getBoundingClientRect()</code> but they all returned <code>300</code>... </p>
  
  <p>Edit: just as proof: </p>
  
  <p><a href="https://i.stack.imgur.com/TUf3k.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TUf3k.png" alt="enter image description here"></a></p>