Scaled up low resolution pixel image element in SVG blurry on Safari, but not in Firefox and Chrome

This is what it looks like in Chrome and Firefox:

This is what it looks like in Safari:

I have tried the commonly suggested

image {
      image-rendering: optimizeSpeed;     
      image-rendering: -moz-crisp-edges;          
      image-rendering: -o-crisp-edges;       
      image-rendering: -webkit-optimize-contrast;
      image-rendering: pixelated; 
      image-rendering: optimize-contrast;      
      -ms-interpolation-mode: nearest-neighbor;  
}

This is my SVG code:

<svg viewBox="0 0 50 50" width="500" xmlns="http://www.w3.org/2000/svg" >
  <defs>
  <style>
    image, svg, use, #character { 
      image-rendering: optimizeSpeed;     
      image-rendering: -moz-crisp-edges;          
      image-rendering: -o-crisp-edges;       
      image-rendering: -webkit-optimize-contrast;
      image-rendering: pixelated; 
      image-rendering: optimize-contrast;      
      -ms-interpolation-mode: nearest-neighbor;  
    } 
    svg { background : #1A1A1A; 
    -webkit-transform: translate3d(0,0,0)}
  </style>
    <svg width="50" height="50" viewBox="100 0 50 50">
      <image id="skeleton" preserveAspectRatio="xMinYMin slice" href="data:image/png;charset:utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAZklEQVR4nO3XQQ6AIAwEQPD/f64nE/WoLFEy84CWppSG1gAASOnJ4FVVl2S9x/JtqcBLOTpy70xCvCMzi4mZefhlhh1CXt/Zp3PwufkZ8TKNiGGzA0DaeWOn/ybLbPZlCgEAAH5nBzIvM+pVaumQAAAAAElFTkSuQmCC"></image>
    </svg>
  </defs>

  <svg id="character">
    <svg width="50" height="50" viewBox="0 0 50 50">
      <use href="#skeleton"></use>
    </svg>
  </svg>
</svg>