Chrome Version: 63.0.3239.84
URL : https://codepen.io/anon/pen/YYPZzw
Behavior in Safari 4.x/5.x: Unknown
Behavior in Firefox 3.x/4.x: Works as expected

Steps To Reproduce:

Example with draggable transforms:
https://codepen.io/anon/pen/YYPZzw

Example of just a transform:
https://codepen.io/anon/pen/qpByMe

How the issue was discovered:
https://github.com/plotly/react-plotly.js/issues/23

(1) Apply a transform on a <foreignObject> in an Svg
(2) Draw content to a div inside the foreignObject, in this case a Plotly.js plot

Expected Result:
The drawn content should render inside the transformed placement of the <foreignObject>

This works as expected in Microsoft Edge 38.14393.1066.0 and Firefox 52.5.2 (32-bit).

Actual Result:
The content is drawn to the original position of the <foreignObject> and moving the foreignObject leaves the content in the original position.

How frequently does this problem reproduce? Always

What is the impact to the user, and is there a workaround? If so, what is
it? Trying to translate these objects doesn't work. There may be a workaround in rearranging the elements, but it adds complications to the elements.