I have the following **Polymer 1.0** element defined:

```
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="us-states">
<style type="text/css">
  :host {
    display: block;
  }
  #div {
    width: 100px;
    height: 100px;
    background-color: yellow;
  }
  #svg {
    width: 150px;
    height: 150px;
  }
</style>
<template>
<div id="div">
</div>
<svg id="svg">
  <path d="M 10 10 L 30 10 L 20 30 z" fill="orange" stroke="black" stroke-width="3" />
</svg>
</template>
</dom-module>
<script type="text/javascript">
  Polymer({
    is: "us-states",
    properties: {},
    ready: function() {
      var div = this.$.div;
      var svg = this.$.svg;
      console.log("Div width and height: " + div.clientWidth + " " + div.clientHeight);
      console.log("SVG width and height: " + svg.clientWidth + " " + svg.clientHeight);
      console.log("This width and height: " + this.clientWidth + " " + this.clientHeight);
    }
  });
</script>

```

The problem I'm seeing is that when the ready() function is executed in Chrome, all the clientWidth/clientHeight values are 0.

However, when I set a breakpoint at the end of the function and print the values manually, I get values I expect. Likewise, when I examine the values in the Scope Inspector debugger tool.

See screenshots (taken while at a breakpoint on the last line of the ready() function)
[![values printed by above code and values from console](https://i.stack.imgur.com/xPX8v.png)](https://i.stack.imgur.com/xPX8v.png)
[![values in the scope inspector](https://i.stack.imgur.com/O90Jb.png)](https://i.stack.imgur.com/O90Jb.png)

Interestingly, on Firefox I get the values I expect for this.client{Height, Width} and div.client{Height,Width} but zeroes for the svg element.

So my question is, what's the right way to access my custom element's children's width and height?

P.S. I'm running Chrome 44.0.2403.125 (64-bit) on Mac