Blurred background images following the upgrade to Internet Explorer 11

This morning, I received an automatic update to IE 11 and noticed that some of my background images appeared blurry. After confirming that the images were not the issue, I opened Chrome and saw that they were crisp again. This left me completely puzzled.

I decided to uninstall the IE11 update, and sure enough, the images were once again clear in IE10. Has anyone else experienced this issue?

I have included a screenshot displaying the images in both browsers.

For reference, here is a link to a jsfiddle. I no longer have IE11 to test, but the markup and CSS are the same as what I am using: http://jsfiddle.net/3g52E/

cssbackground-imageinternet-explorer-11

Answer №1

After analyzing the issue, it appears that the culprit is the border-radius property of your ._ui.

While I cannot explain the exact reason for this issue, there are a couple of ways to resolve it. You can either refrain from using the border-radius property, or opt for a more effective solution by utilizing the <img> tag to create the background.

Consider Using the Image Element

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

To crop your image, you can apply the following CSS properties: position: relative;, position: absolute;, and overflow: hidden;:

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

These properties will be added to ._ui _bre and ._ui _com.

The basic image properties are as follows:

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

You can then adjust the top and bottom offsets for image positioning, instead of using background-position as before:

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

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

By implementing this approach, your image will no longer be affected by the element's border-radius, resolving the initial issue. This creates a clearer distinction between the two elements.

View jsFiddle Example

Answer №2

There are smart techniques to enhance the clarity of images in IE 11.

In our application, we feature icons on buttons with rounded edges. Eliminating the rounded edges or resorting to using <img> tags for icons were not feasible solutions.

Instead, we found success in applying the "classic" approach to optimizing images for retina displays. This involved saving button background images with double the resolution and then specifying the original size using background-size.

The result is impressive, showcasing quality in IE 11 and on retina displays.

Answer №3

As per the information provided on how to create a CSS hack for IE 11,

I made the following addition to my CSS:

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

Utilizing this browser hack caused the borders in IE11 to lose their roundness, however, it did resolve the issue of blurry background images. The round borders still display properly in all other browsers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The stacking order of a child element within a parent element, which has a transform

Hey there, I've encountered a problem and was wondering if you could assist me with it. In the code snippet provided below, you'll see that there are elements with: transform: translate(0,0); Within these elements, there is a "dropdown" elemen ...

htmlcssz-indexcss-transforms

There appears to be a CSS problem cropping up on the right side of my website

Kindly pay a visit to the following URL: dev.dgconcepts.com.pk https://i.stack.imgur.com/sBC4Dm.jpg I am puzzled by the fact that whenever we swipe left or right on mobile responsive, the website shifts slightly on both sides. I am unable to identify ...

csswordpressmobilejquery-mobile

What is the best way to ensure that child elements within a container div are centered when scrolling left and right?

When attempting to handle the 'scroll' event, I noticed that the callback function only records the position of the div as the last position. I am looking for a way to determine if the div is in the center, which is my target. const slide = ...

javascripthtmlcss

Tips for Customizing the StrongLoop LoopBack Explorer CSS

Our team is currently utilizing Strongloop's LoopBack framework for our REST APIs and we are looking to customize the CSS of the LoopBack Explorer. Unfortunately, it seems unclear which CSS files are being employed (LoopBack vs Swagger) and their exac ...

cssuser-interfaceloopbackjsstrongloop

Maintaining the layout of two columns in Bootstrap 4, responsive design turns them into a single stacked

Currently using Bootstrap v4 with a two-column layout that splits the container in half. On larger screens, the items in each column display correctly. However, on smaller screens, Bootstrap shuffles the items from column 2 into column 1. I am looking to ...

htmlcsstwitter-bootstrap

Could Chrome be miscalculating em unit values in media queries?

I have defined my media query breakpoints as shown below: @media screen and (max-width:48em){ /* phone */ } @media screen and (min-width:48.063em){ /* tablet */ } After using a PX to EM calculator to get the 48.063em value (as I was advised to us ...

cssgoogle-chromeresponsive-designmedia-queries

Can an excess of CSS impact the speed and performance of a website?

After conducting thorough research on this specific topic, I was unable to locate the precise answer that I require. For instance, there are numerous divs within my project that necessitate a border. One approach is to create a distinct CSS class such as ...

htmlcss

Adjust the parent container to match the height of the child container when it is being hovered

I have been searching for a solution to this issue, but none of the answers I found seem to work in my specific case. Currently, I have a "Mega Menu" with links on the left side that expand when hovered over, revealing hidden links with images on the righ ...

htmlcss

Issue with long text in a resizable table using jQuery tablesorter 2.31.1

My issue is that when I try to resize the columns in tablesorter, they snap back into place. The column width set with resizable_widths does not apply correctly until a column is manually resized. Despite setting the width of all cells to 120px, any cells ...

javascriptjqueryhtmlcsstablesorter

The position of the HTML class shifts when the window is resized

I am in the process of creating a basic website layout that resembles this design. However, I am facing an issue where the webpage does not adapt well to different window sizes. Specifically, the elements with the classes .gameInfo and .playerList overlap ...

htmlcssweb

"Exploring the versatility of using variables in jquery's .css

I’m facing an issue where I need the rotation of a div to be based on the value stored in "anVar." This is what I currently have: function something() { $('.class').css('-webkit-transform:rotate('anVar'deg)') } The desi ...

javascriptjquerycssvariablesrotatetransform

How to Emphasize Html Select Element on Mobile Devices?

Is there a way to make the HTML select element on Android appear more distinguishable as a dropdown list, rather than just looking like plain text? Any suggestions for highlighting it so users can easily identify and select an option from this element? Up ...

androidhtmlcss

The Django server fails to display the CSS files upon activation

Despite having all the static files in place, only the plain HTML loads without any styles for some unknown reason. I've attempted using collectstatic and even setting up a new project, but to no avail. STATIC_URL is also properly specified along with ...

pythoncssdjangodjango-templatesdjango-admin

What steps can be taken to ensure the visibility and accessibility of two vertically stacked/overlapped Html input elements in HTML?

I have encountered a challenge with my HTML input elements. There are two input elements that overlap each other, and I would like to make both inputs visible while only allowing the top input to be editable. I have tried several approaches involving z-ind ...

htmlcssangulartypescriptz-index

Avoid cascading of the 'display' property in JavaScript styling to prevent inheritance

Is there a way in Javascript to toggle the visibility of a larger portion of HTML without affecting inner display properties with display: <value>? Despite setting an outer display property using Javascript, the inner display properties are also alt ...

javascripthtmlcss

Tips for ensuring that CSS hover effects stay in place even when the page is scrolled

i'm having trouble with a project in React JS that I received from another team. I'm not very confident in my skills with React JS, and I'm facing an issue where a certain part of the page is supposed to change to red when hovered over. Howe ...

cssreactjstypescript

Images in SCSS distorted due to styling issues

I am encountering an issue with a round image displaying properly on a browser, but appearing distorted after building the apk and running it on my android phone. The image's width is greater than its height. How can I ensure that it remains round? M ...

htmlcssionic-frameworksassscss-lint

Subclass Pseudoclass in JavaFX is a powerful feature that

I wanted to create two different styles of buttons in one css file. To achieve this, I added a class to the second button using: close.getStyleClass().add("close-button"); Now, I can reference this button in the css by: .button.close-button However, I ...

cssjavafx

Focus on the image displayed through instafeed.js

Using the Instafeed.js plugin to create a dynamic Instagram feed. Everything is working smoothly, but I'm struggling to center the images being retrieved by Instafeed. Despite trying various methods, I can't seem to get it to display as desired. ...

javascripthtmlcssinstafeedjs

What is the best way to create a dynamic textbox or label within a specific div class?

I need assistance with my dynamic asp.net page where I am generating labels and text boxes in a form. Is there a way to ensure that these elements are generated within a specific div class? Below are the relevant code snippets: for (int i = 0; i < cou ...

c#htmlcssasp.net