This is probably the same issue: transforms are not applied when rendering foreignObject with opacity.

The red and green square are different only in their opacity, one is transformed, the other is not:
http://codepen.io/hanger/pen/Pzjayr?editors=1000

<svg width="400" height="400">
  <!-- not just translate, rotate(10) also not applied etc -->
  <g transform="translate(200, 200)">
    <foreignObject width="100" height="100">
      <div style="width:100px; height:100px; background: green; opacity:1.0"></div>
    </foreignObject>  
    <!-- exactly the same except opacity != 1 -->
    <foreignObject width="100" height="100">
      <div style="width:100px; height:100px; background: red; opacity:0.9"></div>
    </foreignObject>
    <!-- all the squares should line up -->
    <rect stroke="black" stroke-width="3" fill="none" width="100" height="100" />
  </g>
</svg>

getBoundingClientRect() returns the same for both divs.

It's not just opacity either, setting position:relative triggers the same behavior:

<foreignObject width="100" height="100">
  <div style="width:100px; height:100px; background: orange; position:relative"></div>
</foreignObject>

That (both, I think) is  issue 578682  (or one of the handful of similar issues.)

And it's all because we don't have layers inside SVG, I presume.

This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available. If you change it back, also remove the "Hotlist-Recharge-Cold" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Looks like this was fixed by f451d9b5de5a1b4691d60d8c74341ac8a466cf57. Duping to  issue 666416 .