SVG маска не обрезается в Firefox

Question

У меня есть маска SVG, сделанная из двух точек, вырезая два отверстия из прямоугольника. Этот эффект прекрасно работает в браузерах webkit, но в Firefox я просто получаю сплошной прямоугольник. Firefox предназначен для поддержки маски SVG - есть идеи, где я ошибся?

body {background:pink}
#overlay {
  position: relative;
  z-index: 99;
  position: absolute;
  width: 50vw;
  height: 100vh;
}

svg { position:absolute;width: 100%;height:100%}

<div id="overlay">

  <svg>

      <mask id="mymask" >
        <rect class="svg-bg" x="0" y="0" width="100%" height="100%" fill="white"/>
        <circle id="hole-1" cx="50%" cy="37vh" r="12vh" fill="#000000"/>
        <circle id="hole-2" cx="50%" cy="63vh" r="12vh" fill="#000000"/>
      </mask>

    <rect id="hole-bg" x="0" y="0" width="100%" height="100%"  mask="url(#mymask)"/>

  </svg>

</div>