Javascript 为什么d3组中的文本区域在添加新行时会改变位置？

编辑： 所以，如果我设置“.style”（“溢出”、“隐藏”），那么它就不会发生。很奇怪

所以我的问题是，我给一个foreignObject添加了一个textarea，这个foreignObject是d3组的一部分，当你给textarea添加新行时，它会改变位置。我怎样才能解决这个问题？在这里你可以看到我在说什么（按2或3次回车键）

原始代码：

var svg = d3.select("body").append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 960 600")
.attr("width", "100%")
.attr("height", "100%")
.attr("style", "outline: thin solid black;")
.style("background-color", "#f4f3f1");


var group = svg.append('g')
    .datum({x: 0, y: 0});

group.append("rect")
    .data([{x: 200, y: 200, width: 400, height: 200}])
    .attr("id", "base")
    .attr("x", function (d) {return d.x;})
    .attr('y', function (d) {return d.y;})
    .attr('width', function (d) {return d.width;})
    .attr('height', function (d) {return d.height;})
    .attr("fill", "skyblue");

var inp = group.append("foreignObject")
            .attr('x', 200)
    .attr( 'y', 200)
    .append("xhtml:body")
    .attr('xmlns','http://www.w3.org/1999/xhtml')
    .append('textarea')
    .style("font-size" , "20px")

以前

之后

---

在哪个浏览器中发生这种情况？我在chrome上看不到任何问题。chrome-版本57.0.2987.133（64位）。Safari-版本10.1（12603.1.30.0.34）同样的东西。所以如果我设置“.style”（“溢出”、“隐藏”）”则不会发生。很奇怪。