problems with 'mask' in firefox

I'm at the end of my rope here. This 'mask' should work right? Well, I'm beginning to doubt. My example is at http://50.63.191.172/mask.html.

I really don't know what else I could try. I do have some constraints:

I would like to have the svg external to any html page / css stylesheet because it will be used from multiple places.
I would like to have svg non size predetermined, because I don't want to have multiple versions for various sizes; there should be only one, so that it can be cached by browsers.
I can't have the image specified inside the svg. The svg is a styling to be applied to any potential image.

I've tried multiple ways to make this work but no luck so far. It works just fine in Chrome/Safari using their '-webkit-mask' property. I've had "some" success with firefox and 'mask' if I specify the width and height of the masking rect in absolute pixels, but not as 100%. Is what I want even doable (an auto-scaling mask in firefox)? If yes, what am I missing?

The frustrating part, sometimes if I keep reloading the page, the images appear unmasked, only to be wiped off immediately after finish displaying.

Here's my svg:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <mask id="c1">
   <g id="group">
     <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
       <stop stop-color="white" offset="0"/>
       <stop stop-color="white" stop-opacity="0" offset="1"/>
     </linearGradient>
     <rect x="0" y="0" width="100%" height="100%" fill="url(#g)" />
   </g>
  </mask>
 </defs>
 <use xlink:href="#group"/>
</svg>

And this is my html/css combined:

<html lang="en">
<head>
 <meta charset=utf-8>
 <title>Testing mask in various browsers</title>
 <style>
  .masked {
   mask: url(mask.svg#c1);  /*Firefox */
   -webkit-mask: url('mask.svg'); /*Chrome, Safari */
  }
  .nob {
    border: none;
    outline: none;
  }
  div.stage { position: relative; }
.inline
{
  display: inline-block;
}
span.stage
{
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  position: absolute;
  left: 0px;
  top: 0px;
}
  .big { width:600px; height:588px; }
  .normal { width:300px; height:294px; }
  .small { width:150px; height:147px; }
 </style>
</head>
<body style="background-image: url(background.gif);">
 <div class="stage inline big">
  <a class="nob" href="mask.html"><img class="nob masked" src="b_pic.jpg"/></a>
 </div>
 <div class="stage inline normal">
  <a class="nob" href="mask.html"><img class="nob masked" src="pic.jpg"/></a>
 </div>
 <div class="stage inline small">
  <a class="nob" href="mask.html"><img class="nob masked" src="s_pic.jpg"/></a>
 </div>
</body>
</html>

What am I missing?

Turns out FF doesn't do percent. Instead it likes to work in objectBoundingBox units between 0 and 1. Well, Chrome/Safari don't like that. But there is a way to split the difference. Here's my working current version which I will aim to optimize next.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <mask id="c1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <g id="group1">
        <linearGradient id="g1" gradientUnits="objectBoundingBox" x2="0" y2="1">
          <stop stop-color="white" offset="0"/>
          <stop stop-color="white" stop-opacity="0" offset="1"/>
        </linearGradient>
        <rect x="0" y="0" width="1" height="1" fill="url(#g1)" />
      </g>
    </mask>
    <mask id="c2">
      <g id="group2">
        <linearGradient id="g2" gradientUnits="objectBoundingBox" x2="0" y2="1">
          <stop stop-color="white" offset="0"/>
          <stop stop-color="white" stop-opacity="0" offset="1"/>
        </linearGradient>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#g2)" />
      </g>
    </mask>
  </defs>
  <use xlink:href="#group2"/>
</svg>

So it goes, it can be done.