React-plotly Svg transform

[jmeberst]

I'm trying to use react-plotly inside a foreign object within an Svg, this works fine as shown here.
https://codepen.io/anon/pen/eyYjgr

However I would like to move this object using a transform.
<foreignObject id={"TestSvgFO"} width="100%" height="100%" transform="translate(150, 0)" xmlns="http://www.w3.org/2000/svg">

This results in sliding the view window off the plotly graph instead of moving it.
https://codepen.io/anon/pen/qpByMe

Any suggestions on a way to get it to move correctly in an Svg object with a transform?

(edited your links so they work - alexcjohnson)

[bpostlethwaite]

@jmeberst I don't seem to have access to those codepens.

[alexcjohnson]

I'm afraid we've got some longstanding bugs with plotly.js inside css-transformed elements - probably you're seeing the same thing as this issue: plotly/plotly.js#888

[jmeberst]

@alexcjohnson I'm not having any issues with the css transforms when they are just applied to a wrapper div though, that seems to be working correctly where the entire graph can be moved as a unit like I would expect.

https://codepen.io/anon/pen/BJaqeN

[alexcjohnson]

Weird. This behaves differently (and perhaps correctly) in Firefox, and Chrome seems confused about where items are (note that I've selected the first bar in the inspector):

So I'm tempted to say this is a Chrome bug...

[jmeberst]

It's working as I would expect in Firefox. What a strange bug.