Accepted answer

This is a known bug in Firefox :

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('');
  -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>
      <text x="6" y="-19.375" dy=".75em" style="fill: rgb(165, 216, 103);">The text here</text>

Related Query

More Query from same tag