How to un-anti-alias a sprite background image ENLARGEMENT in Microsoft Edge?

Question

Examine the problem in the three figures below. I want to expand what already works perfectly in Mozilla FireFox and Google Chrome, to work perfect in Microsoft Edge, too.

---

Mozilla FireFox: Google Chrome: Microsoft Edge:

---

I want a deliberatly pixelate, NON-anti-aliased, representation of my sprite image enlargement in Microsoft Edge, but no matter what I've tried has failed so far in that single browser. I want an elegant CSS-only way to stretch the current code sothat in Microsoft Edge it works as it already does in the other two major browsers. What haven't I tried yet? Thanks in advance!

HTML:

<box><icon style="background-position:0px -3081px"></icon></box>

CSS:

box {
float: left;
text-align: center;
width: 40px;
}

icon {
background:url(../layout/icons.png) no-repeat;
background-color: white;
margin: auto;
margin-top: -10px;
width:13px;
height:13px;
display: block;

-ms-transform: scale(3);
-o-transform: scale(3);
-webkit-transform: scale(3);
transform: scale(3);

-ms-interpolation-mode: nearest-neighbor;   /* IE8+ */
image-rendering: -moz-crisp-edges;          /* Firefox */
image-rendering: -o-crisp-edges;            /* Opera */
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering: pixelated;                 /* Chrome */
image-rendering: optimizeSpeed;             /* stop smoothing, speeden up instead */
image-rendering: optimize-contrast;         /* CSS3 Proposed */
}

Answer 1

I had recently the exact same problem on a web project, and, as mentioned in the comments it is technically not supported by Edge for now. And IMHO, as it's an expected feature by the dev community for over 3 years, and in low priority in their backlog, I think it's not worth to wait after this feature getting released.

And since I had to get the job done, what I did to solve the problem was using larger source images and just scaled them down with CSS (which is also a good thing especially when displayed on high density screens such as Retina).

In your special case, using vector images such as SVG is IMO the best way to get the job done even on Edge, it's also lighter in weight than larger images.