Размытые фоновые изображения после обновления до IE11

Итак, сегодня утром я получил автоматическое обновление для IE 11, после проверки моих глаз кажется, что некоторые из моих фоновых изображений размыты.

Я должен был проверить, что это не мое изображение, вызывающее проблему, поэтому после запуска Chrome они снова были приятными и четкими... Я совершенно сбит с толку.

Теперь я удалил обновление IE11, и они снова приятны и свежий в IE10... Кто-нибудь еще столкнулся с этим?

Я включил скриншот, показывающий изображения в разных браузерах.

Вот ссылка на jsfiddle, у меня нет IE11 для тестирования, но с той же разметкой и CSS, которые я использую: http://jsfiddle.net/3g52E/

Ответ 1

Ну, я вижу, что вызывает эту проблему. Это border-radius вашего ._ui.

Теперь я не могу сказать, почему это происходит.
Однако, если вы хотите исправить это, вы можете или не использовать border-radius или, что лучше, я считаю, использовать тег <img> для генерации фона.

Использовать элемент изображения

<img src="http://i.imgur.com/DauuVHW.png" />

Теперь, чтобы отключить изображение, вы можете просто использовать position: relative;, position: absolute; и overflow: hidden;:

.block1 > div
{
    position: relative;
    overflow: hidden;
}

Это добавит свойства на ._ui _bre и ._ui _com.

Если основные свойства изображения:

img
{
    position: absolute;
    left: 2px;
}

Теперь вы можете просто использовать верхнее и нижнее смещение для позиционирования изображения. Где вы использовали background-position до:

._bre._ui img
{
    top: -68px;
}

._com._ui img
{
    top: -24px;
}

Таким образом, ваше изображение не является частью элемента с border-radius, что вызвало эту проблему. Теперь они имеют более четкое разделение; 2 разных элемента.

jsFiddle

Ответ 2

Возможно, есть более элегантный способ исправления размытых изображений в IE 11.

В нашем приложении есть значки на кнопках с круглыми углами. Удаление круглых углов или использование <img> для значков не были параметрами.

Однако то, что сработало для нас, было "классической" оптимизацией изображений для дисплеев сетчатки, то есть сохранения фоновых изображений кнопки с более высоким разрешением и затем определения исходного размера в размере фона.

Выглядит отлично в IE 11 и на сетчатых дисплеях.

Ответ 3

В соответствии с этим: Как написать CSS-хак для IE 11?

Я добавил этот код в свой CSS:

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .my_elements_with_border_radius { border-radius: 0 } 
}

С этим браузером взломать границы больше не в IE11, но, по крайней мере, фоновые изображения больше не расплываются. В других браузерах они все еще круглые.