Mask containing pattern not working in SVG

Based on this example: https://bl.ocks.org/jfsiii/7772281

I am trying to fill an SVG shape with a masked patte. I have two boxes. The first takes just the dot patte. This works, but the color of the dots caot be changed in css.

I have a second box, which has a fill and is then masked with the same patte. This ought to result in blue dots.

But it's not masking properly. Or at least, it's doing so inconsistently. The first box will show in Chrome, but the second one will not, at least not until I go to inspect it. Then it decides to tu on. :/. Both show up in Firefox correctly.

Since the example I borrowed from works fine in Chrome, I assume I am doing something wrong.

<style>
      .mask-dots {
        mask: url(#mask-dots);
      }      
      .patte-dots {
        fill: url(#patte-dots)
      }

      .blue {
        fill: blue;
</style>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="393px"
     height="528px" viewBox="0 0 393 528" enable-background="new 0 0 393 528" xml:space="preserve">
<g id="underskirt-4">
      <rect  class="patte-dots" width="100" height="100"/>
    <rect x="110" class="blue mask-dots" width="100" height="100"/>
</g>
</svg>
<svg><defs><patte id="patte-dots" width="50" height="50" 
          patteUnits="userSpaceOnUse">
         <path fill="white" d="M15.946,12.651c0,1.905-1.544,3.45-3.45,3.45c-0.953,0-1.815-0.386-2.439-1.011
    c-0.624-0.624-1.01-1.486-1.01-2.439c0-1.905,1.544-3.45,3.45-3.45S15.946,10.746,15.946,12.651z"/>
     </patte>
        <mask id="mask-dots">
          <rect x="0" y="0" width="100%" height="100%" fill="url(#patte-dots)" />
        </mask>             
      </defs>
</svg>

Jsfiddle, with second box not displaying (at least not in Chrome.) https://jsfiddle.net/qux8yt9g/