title: html/css: png losing transparency on border of a cut out(in browser only)
body: <h2>edit:</h2>
  
  <p>seems to be mac/chrome related problem, works fine on win/chrome, mac/safari, mac/firefox</p>
  
  <p><a href="http://jsbin.com/bezibu/1/edit?html,css,output" rel="nofollow noreferrer">http://jsbin.com/bezibu/1/edit?html,css,output</a></p>
  
  <p>You can see a white border inside the cut out in browser.</p>
  
  <p><img src="https://i.stack.imgur.com/mKXKy.png" alt="enter image description here"></p>
  
  <p>closeup:</p>
  
  <p><img src="https://i.stack.imgur.com/QCcXr.png" alt="enter image description here"></p>
  
  <p>same thing in photoshop, no white border</p>
  
  <p><img src="https://i.stack.imgur.com/hDURI.png" alt="enter image description here"></p>
  
  <p>closeup:</p>
  
  <p><img src="https://i.stack.imgur.com/UIlIN.png" alt="enter image description here"></p>
  
  <p>Any idea why is this happening and how to prevent it?</p>
  
  <p>Whether it's as a background image or <code>&lt;img&gt;</code> doesn't seem to matter..</p>