Blurry Background Images After Update to Ie11

Blurry background images after update to IE11

Well i can see what is causing this problem. It's the border-radius of your ._ui.

Now i can't tell you why this happens.
However if you want to fix this you can or don't use border-radius or, which is a better solution i my opinion, use the <img> tag to generate the background.

Use image element

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

Now to cut-off your image you can just use position: relative;, position: absolute; and a overflow: hidden;:

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

This will add the properties on ._ui _bre and ._ui _com.

Where the basic image properties are:

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

Now you can just use the top and bottom offset for the the image positioning. Where as you used background-position before:

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

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

This way your image is not a part of the element which has border-radius anymore, which caused this problem. They have a more clear seperation now; 2 different elements.

jsFiddle

IE11 making background image text blurry

It is a normal IE bug.

http://www.infoworld.com/t/microsoft-windows/blurry-fonts-bug-kb-2670838-persists-ie11-and-windows-7-231035

i Haven't found any solutions to this subject yet.

IE9 - 11 SVG backgrounds are blurry

Use inline image SVGs. If you are concerned that the resource is download by browsers other than IE then use javascript media queries

Wordpress images load crisply on IE but are blurry on chrome?

The screenshot you’ve provided has different zoom: the image has the width of 294px on IE and 323px on Chrome (i.e. the zoom is 110%). Try using Ctrl+minus to change the zoom of Chrome.

Your image is smaller, and the user wants to display it on a bigger size.

Just use the bigger photos (a common practice is to use photos twice as big, and scale them down — this will also look good on Retina screens).

(And please remove the CSS you’ve added,

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

it will not make the rendering crisp. Instead, it will make it pixelated on bigger zooms. For photos, this is even worse.)

Blurry Images in catalogue view

Your uploaded image is larger than the theme display area, which in turn makes the browser scale down your image and 'guess' how it will look on a smaller size. This sometimes results in less than satisfactory rendering (like in your case).

To fix this you could either:

1) Resize your images to exactly/around the provided image area size (290x290) so the browser doesn't have to scale and re-sample your image.

2) You can change the image rendering style used by the browser to one of your preference:

.product-item .wrap-img img {
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

See here for a more comprehensive explanation:

https://css-tricks.com/almanac/properties/i/image-rendering/

Internet Explorer 11 image pixelated

The -ms-interpolation-mode is setting worked only in IE6-IE8, but was removed in IE9. So it will not affect the result.

You could fix the issue by using a plugin which is called "Crossbrowser-Bicubic-Image-Interpolation".

I've just modified some parts of the code from the similar issue thread(IE thumbnail pixelation when high resolution image is set to small size) which works well.

Here is the testing code.

<script src="https://rawgit.com/sukhoi1/Crossbrowser-Bicubic-Image-Interpolation/master/bicubicInterpolation.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('img.first').bicubicImgInterpolation({
            crossOrigin: 'anonymous' 
        });
    });
</script>

<img id="someId" class="first" width="200" src="https://i.imgur.com/pJtQtzR.png">

For more about the pixelation issue, you could refer to this link:https://github.com/sukhoi1/ie-bicubic-img-interpolation-plugin/wiki

---

Related Topics