title: getBoundingClientRect() returns wrong values for nested SVGs in Chrome
body: <p>I am having some issues with the size of the svg-dom element being larger than it's given size if an element inside it is larger, or set to a different position. I have made a js fiddle where you can reproduce it. Just inspect it and check the size of svg3. If you do it in chrome it is set to 500px by 500px, in firefox it is set to the svg's given size. Here is the fiddle: <a href="https://jsfiddle.net/w1gftej0/17/" rel="nofollow noreferrer">https://jsfiddle.net/w1gftej0/17/</a>
  And here is the code:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;div style="width:200px;height:70px"&gt;
          &lt;div style="width:100%;height:100%;"&gt;
              &lt;svg id="svg1" width="100%" height="90%"&gt;
                  &lt;rect height="100%" width="100%" fill="#00001a"&gt;&lt;/rect&gt;
                  &lt;svg id="svg2" width="90%" height="10%" x="10%"&gt;
                      &lt;rect height="100%" width="100%" fill="#ff4d4d"&gt;&lt;/rect&gt;
                  &lt;/svg&gt;
                  &lt;svg id="svg3" width="90%" height="90%" x="10%" y="10%"&gt;
                      &lt;rect height="100%" width="100%" fill="#ff4d4d"&gt;&lt;/rect&gt;
                      &lt;line x1="0%" x2="500px" y1="25%" y2="25%" stroke="#236ce0" /&gt;
                      &lt;line x1="50%" x2="50%" y1="0%" y2="500px" stroke="#236ce0" /&gt;
                  &lt;/svg&gt;
                  &lt;svg id="svg4" width="10%" height="90%" y="10%"&gt;
                      &lt;rect height="100%" width="100%" fill="#ff4d4d"&gt;&lt;/rect&gt;
                  &lt;/svg&gt;
              &lt;/svg&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This behaviour is causing me quite a lot of headaches during my development, is there any fixes that makes chrome/edge behave like firefox? I do realize that if all elements inside the svg are smaller, this issue doesn't exist. However, with the application i am working on, this completely breaks the functionality if for some reason the svg element is larger. (I am using getBoundingClientRect to calculate mouse positions). 
  I would love any tips as to how to handle this.</p>
  
  <p>This is a follow up to a question i asked about 2 months ago: <a href="https://stackoverflow.com/questions/52876222/nested-svgs-width-height-set-in-not-working-in-chrome-or-edge">Nested SVG&#39;s width height set in % not working in chrome or edge</a></p>
  
  <p>edit:</p>
  
  <p>Possibly a bug, reported it here: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=914324" rel="nofollow noreferrer">https://bugs.chromium.org/p/chromium/issues/detail?id=914324</a></p>