title: Why are two elements with same coordinates in a d3-group not 100% overlapping?
body: <p>well I have kind of a strange problem. Two elements with same coordinates in a d3-group are not exactly overlapping. Under Chrome (1. pic) both coordinates x &amp; y are off and under Safari (2. pic) x is off. On the pics you see only the text and the border of the textarea!
  Does anyone know why and how to fix it (without manually adjusting the coordinates)?<br>
  First I add a svg to HTML-body, then a group to svg, then a rect to the group and then a textarea. Here some code parts:</p>
  
  <pre><code>var svg = d3.select("body").append('svg')
  .attr('preserveAspectRatio', 'xMinYMin meet')
  .attr('viewBox', '0 0 960 600')
  .attr('width', '100%')
  .attr('height', '100%')
  
  grp = svg.append("g")
      .datum({x: 0, y: 0})
  
  rect = grp.append("rect")
      .data([{x: data.x, y: data.y, width: data.w, height: data.h}])
      .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;})
  
  textarea = grp.append("foreignObject")
      .data([{x: data.x, y: data.y, width: data.w, height: data.h}])
      .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;})
      .append("xhtml:body")
      .attr('xmlns','http://www.w3.org/1999/xhtml')
      .append('textarea')
      .style("width", (data.w) + "px")
      .style("height", (data.h)+ "px")
  </code></pre>
  
  <p>Chrome
  <a href="https://i.stack.imgur.com/0eaNH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0eaNH.png" alt="enter image description here"></a></p>
  
  <p>Safari
  <a href="https://i.stack.imgur.com/nXhKW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nXhKW.png" alt="enter image description here"></a></p>