Javascript foreignObject中的背景图像隐藏了Firefox上的其他svg元素

我在使用d3创建的可视化中添加横幅时遇到问题。我想添加横幅，然后在横幅顶部添加文本。这适用于Chrome（文本呈现在图像的“顶部”），但在Firefox上，看起来图像呈现在文本的顶部。有人知道为什么这在Chrome上有效，而不是在Firefox上，我有没有办法在Firefox上达到同样的效果

    var margin = {
    top: 155,
    right: 3,
    bottom: 3,
    left: 3
  },
  width = $(window).width() - margin.left - margin.right,
  height = $(window).height() - margin.top - margin.bottom,
  formatNumber = d3.format(",d"),
  transitioning;

var x = d3.scale.linear()
  .domain([0, width])
  .range([0, width]);

var y = d3.scale.linear()
  .domain([0, height])
  .range([0, height]);

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .style("shape-rendering", "crispEdges");

var grandparent = svg.append("g").attr("class", "grandparent");

grandparent.append("rect")
  .attr("y", -margin.top)
  .attr("width", width)
  .attr("height", margin.top);

grandparent.append("foreignObject")
.attr("y", -margin.top)
  .attr("width", width)
  .attr("height", margin.top)
  .append("xhtml:div")
  .attr("class", "bannerDiv");

grandparent.append("text")
  .attr("x", 6)
  .attr("y", (-1 / 8) * margin.top)
  .attr("dy", ".75em")
  .style("fill", "#A5D867")
  .text("The text here");

function text(text) {
  text.attr("x", function(d) {
      return x(d.x) + 6;
    })
    .attr("y", function(d) {
      return y(d.y) + 6;
    });
}

有关示例，请参见此JSFIDLE：

---

这是Firefox中的一个已知错误：

在bug报告中，一个给定的解决方法是将

foreignObject

的转换设置为

translate（0,0）

input:checked+svg foreignObject{
变换：平移（0,0）；
}
班纳迪夫先生{
宽度：100%；
身高：100%；
背景图像：url（'http://www.newdesignfile.com/postpic/2011/10/header-banner-design_64599.jpg');
-webkit背景大小：100%100%；
-moz背景大小：100%100%；
-o-背景尺寸：100%100%；
背景大小：100%100%；
}
身体{
背景:#bbb ;；
}

变通方法
这里的文字

使用带填充图案的矩形显示图像。@RobertLongson出于好奇，Chrome和Firefox之间行为差异的原因（已知）是吗？是的，听起来像个bug，知道吗？这意味着

foreignObject

内容始终位于顶部？啊，也许吧