score:3

Accepted answer

This is a known bug in Firefox : https://bugzilla.mozilla.org/show_bug.cgi?id=984312

In the bug report, one given workaround is to set your foreignObject's transform to translate(0,0)

input:checked + svg foreignObject {
  transform: translate(0, 0);
}
.bannerDiv {
  width: 100%;
  height: 100%;
  background-image: url('http://www.newdesignfile.com/postpic/2011/10/header-banner-design_64599.jpg');
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
}

body {
  background: #bbb;
}
<label>workaround</label><input type="checkbox" checked/>
<svg width="535" height="484">
  <g transform="translate(3,155)" style="shape-rendering: crispedges;">
    <g class="grandparent">
      <rect y="-155" width="529" height="155"></rect>
      <foreignObject y="-155" width="529" height="155">
        <div class="bannerDiv"></div>
      </foreignObject>
      <text x="6" y="-19.375" dy=".75em" style="fill: rgb(165, 216, 103);">The text here</text>
    </g>
  </g>
</svg>


Related Query

More Query from same tag