Как снять сглаживание спрайтового фонового изображения УВЕЛИЧЕНИЕ в Microsoft Edge? - PullRequest
Новая
       6

Как снять сглаживание спрайтового фонового изображения УВЕЛИЧЕНИЕ в Microsoft Edge?

0 голосов
/ 01 июня 2018

Изучите проблему на трех рисунках ниже.Я хочу расширить то, что уже отлично работает в Mozilla FireFox и Google Chrome, чтобы идеально работать и в Microsoft Edge.

Mozilla FireFox: enter image description here Google Chrome: enter image description here Microsoft Edge: enter image description here

Я хочу преднамеренно пиксельное, не сглаженное представление моего спрайтового изображения расширение в Microsoft Edge, но независимо от того, что я пробовал, до сих пор не получалось в этом единственном браузере.Мне нужен элегантный способ только для CSS, чтобы растянуть текущий код, чтобы в Microsoft Edge он работал так же, как и в двух других основных браузерах.Что я еще не пробовал?Заранее спасибо!

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 */
}

1 Ответ

0 голосов
/ 08 июня 2018

У меня недавно была та же самая проблема с веб-проектом, и, как уже упоминалось в комментариях, на данный момент она технически не поддерживается Edge.И ИМХО, поскольку это ожидаемая особенность сообщества разработчиков уже более 3 лет и низкий приоритет в их невыполненных работах, я думаю, что не стоит ждать после того, как эта функция будет выпущена.

И так как мне пришлось получитьРабота, которую я сделал, чтобы решить эту проблему, заключалась в использовании больших исходных изображений и уменьшении их размера с помощью CSS (что также хорошо, особенно при отображении на экранах высокой плотности, таких как Retina).

В вашемОсобый случай, использование векторных изображений, таких как SVG, является IMO лучшим способом выполнить работу даже в Edge, а также легче по весу, чем большие изображения.

...