title: css masking in IE10
body: <p>I have this code which makes a background-image appear under a css mask.</p>
  
  <pre><code>.test-splash {
   height: 1000px;
  width: 1000px;
  display: block;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(11%, -12%);
  -webkit-mask: url("http://www.clipartbest.com/cliparts/aTq/9Er/aTq9ErbTM.svg");
  mask: url("http://www.clipartbest.com/cliparts/aTq/9Er/aTq9ErbTM.svg");
  -webkit-mask-image: url("http://www.clipartbest.com/cliparts/aTq/9Er/aTq9ErbTM.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  background-image: url(http://wemedia.com/wp-content/uploads/2008/12/istock_dandelionlarge.jpg);
  background-position: 0 0;
  background-position-x: center;
  background-repeat: no-repeat;
  z-index: 28;
  }
  </code></pre>
  
  <p>And the html</p>
  
  <pre><code>&lt;div class="test-splash"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here is a jsbin showing what I want to achieve</p>
  
  <p><a href="http://jsbin.com/lunoxo/1/edit?html,css,output" rel="nofollow">http://jsbin.com/lunoxo/1/edit?html,css,output</a></p>
  
  <p>It's working fine in webkit and mozilla browsers but not IE 10. What do i have to do to make it work in that browser?</p>