IE11 SVG pattern mask drawing bug?

I am experiencing a problem with IE11.

The following HTML will draw three squares:

<div id="container">
  <svg xmlns="http://www.w3.org/2000/svg" width="664" height="200" version="1.1">
    <defs>
      <pattern id="pattern-stripe" patternUnits="userSpaceOnUse" patternTransform="rotate(45)" width="4" height="4">
        <rect fill="white" width="2" height="4" />
      </pattern>
      <mask id="mask-stripe">
        <rect fill="url(#pattern-stripe)" x="0" y="0" width="100%" height="100%" />
      </mask>
    </defs>
    <g>
      <rect class="color-0" x="0" y="0" width="100" height="100" />
      <rect class="color-0" x="105" y="0" width="100" height="100" />
      <rect class="color-0" x="210" y="0" width="100" height="100" />
    </g>
  </svg>
</div>   

I apply a mask to the elements bij adding the css class: “pattern”.
This will apply this css style to the :

.pattern {
  mask: url(#mask-stripe);
}

In IE11, if I toggle the pattern by toggling the CSS class, strange things happen.

See it in action: Fiddle

Can anybody tell me how to solve this?