Pixelated image on Internet Explorer 11

While testing my website on Internet Explorer 11, I noticed that the logo appears very pixelated. However, the logo looks nice in other browsers such as Safari, Chrome, and Mozilla Firefox. Can someone please help me resolve this issue as the image is unattractive?

The version of Internet Explorer I am using is 11.407.17134.0.

I have tried following the steps outlined in the guide at IE Fix, but unfortunately, it did not solve the problem...

Image (Logo) Properties: Image size: 5549 x 1101 File size: 56KB See a Screenshot of the Problem.

Edit:
In the current screenshot, only a text logo is visible. I plan to replace it with an actual image logo in the future once my designer completes it. Apologies for any confusion!

CSS Code:

@media all and (min-width:768px)
body[data-subdomain='customer'] .navbar-brand, body[data-subdomain='school'] .navbar-brand, body[data-subdomain='parents'] .navbar-brand, body[data-subdomain='admincenter'] .navbar-brand {
    background: url(../img/logo.png) no-repeat left center;
    background-size: contain;
    width: 210px;
    margin-left: 15px;
    -ms-interpolation-mode: bicubic;
}

Edit:
JSFiddle: https://jsfiddle.net/hxaeuyp0/11/

cssimageinternet-explorer

Answer №1

The setting for -ms-interpolation-mode only applied to IE6-IE8 and was removed in IE9, so it no longer has any impact on the outcome.

To resolve this issue, you can utilize a plugin called "Crossbrowser-Bicubic-Image-Interpolation".

I have made adjustments to the code based on a similar problem discussed in this thread (IE thumbnail pixelation when high resolution image is set to small size) which proved to be successful.

Below is the test code snippet.

<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">

https://i.sstatic.net/3fdWS.png

To learn more about the pixelation issue, please visit this link:https://github.com/sukhoi1/ie-bicubic-img-interpolation-plugin/wiki

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

CSS: Achieving Full Container Width Text with Respect to Another Container's Height

Hello, I am facing a very specific issue that I can't seem to resolve: I have two containers (ion-card) and I want them to always be the same height. I was able to achieve this by following the solution provided here: https://i.sstatic.net/he8O7.png ...

cssangularionic-frameworksass

The background image is failing to display

I am currently working on a subpage for my website that includes a navigation bar and footer. I am looking to add a background image behind the navigation bar, similar to this design. https://i.stack.imgur.com/j6fDZ.jpg After trying various methods, I at ...

htmlcsstwitter-bootstrap-3

JavaScript Reference for the HTML DOM Style's height property and revert back to the initial style height

Hey there! I have a simple fix for those who know JavaScript. I have some code that changes the height style on the first click, but I'm looking for a way to revert back to the original height style on the second click. Here's the code snippet: ...

javascripthtmlcss

What is the complete list of features that ColorTranslator.FromHtml() supports and what are the reasons behind its departure from traditional CSS color interpretation guidelines

I'm looking to enhance an API by providing users with the ability to specify the color of something. I want it to accept various representations of colors, such as hex codes and CSS colors. Initially, I thought that ColorTranslator.FromHtml() would fu ...

c#css.netcolors

Generate Material UI sidebar components that are positioned above all other components

I am currently working on a sidebar component using the Material UI Drawer component. I am looking to add components that align side by side with the sidebar, similar to the green box shown in the image below. https://i.sstatic.net/aAtn6.png After attem ...

javascriptcssreactjsmaterial-ui

What is the best way to define the maximum width for responsive images in Bootstrap 4?

Query: How can I control the max-width of an image in Bootstrap 4 without losing its responsiveness? Context: Bootstrap 4's .img-fluid class ensures images remain responsive. The image is set to scale with the parent element by utilizing ma ...

cssbootstrap-4responsiveness

Position the Bootstrap Modal at the start of the designated DIV

When using a Bootstrap Modal to display larger versions of thumbnails in a photo gallery, there can be some challenges. The default behavior of Bootstrap is to position the modal at the top of the viewport, which may work fine in most cases. However, if th ...

javascriptjqueryhtmlcsstwitter-bootstrap

Round shield progress indicator

https://i.sstatic.net/D3GCr.png I have been trying to create a progress bar by overlaying one SVG on top of another (one translucent and the other colored). Despite many attempts, I have not been successful in solving this problem. Any help or solutions w ...

htmlcsssvg

When using Firefox to scale down a div with CSS `moz-transform`, the border details are unfortunately not retained

When viewing the following HTML in Firefox, you may notice that the right and bottom border is missing. However, Chrome and Internet Explorer display it correctly. Is this a bug in Firefox, or is there another method I can use to make it look consistent ...

htmlcsstransform

Setting the height of a span element to 100% within a table using

I have a table with some content inside. One of the elements is an <a class="available">available</a>, but it doesn't fill the entire row of the table. Here is the HTML code: <table with="100%" class="list_table"> <tbody> < ...

htmlcsshtml-table

Place an element in a higher position than a slideshow

I recently encountered an issue where I was trying to place a png image above my slideshow. Despite trying various solutions, the image always appeared behind or on top without transparency. Based on the erratic display, it seems like the problem might be ...

jqueryhtmlcsscss-positionslideshow

Bug causing aspect ratio to be maintained during image resizing

I've encountered an issue with a GD image resizing script that I found and modified. It's not behaving as expected. For instance, let's say I want to resize an image to a maximum of 200w x 200h while maintaining the aspect ratio. The origin ...

phpimageresizegd

Updating image of a button using CSS when clicked

Looking for a solution to make HTML image buttons change color when clicked on? I have two grey image buttons and want them to turn into different colored images upon clicking, while also making the other button grey. This way, users can easily identify th ...

htmlcss

Modify the text style on the fly using React js

Looking to update the styling of the tab text in the navbar, as well as implement functionality where clicking on a tab switches between pages and marks the selected tab as active. Below is the code I've written: Header.js import React from "rea ...

javascriptcssreactjs

Determining if a Website is Responsive with PHP

One way to determine if a website is responsive or not is by analyzing its HTML code. A previous inquiry on this topic can be found here: . This method only focuses on checking for the <meta name="viewport" content="width=device-width"> tag. It&apos ...

phphtmlcssresponsive-design

Tips for designing a doodle logo that includes a magnifier lens effect when hovered over

I have a vision for a unique and creative logo solution that involves incorporating a magnifier glass effect. When a user hovers over a certain area of the logo, I want it to zoom in with a magnifier glass effect. I haven't been able to find much info ...

jqueryhtmlcss

Reduce / condense text that is overflowing

Take a look at the image I've attached. The text is overflowing outside the div, and I want to collapse it with a "Read more" link at the end. Users should be able to click on the "Read more" link to expand the text. I'm currently working on a p ...

javahtmlcsswebmern

Combining CSS documents

In order to improve page load speed, I need to consolidate multiple CSS files into one large file. Will the styles function properly if I merge them all together, or are there potential issues when combining multiple CSS files? My software is built in Ja ...

javacssmerge

Utilize the ::before selector to insert white spaces

I attempted this solution, but unfortunately it did not produce the desired outcome: .stackoverflow::before { font-family: 'FontAwesome'; content: "\f16c "; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-aw ...

csscss-selectors

Centering elements in CSS with a full-width approach

My goal is to centralize all the elements on a webpage so that when the browser size is modified, the content shifts accordingly. Currently, I am using the following CSS code: margin: 0px auto; width: 670px; However, I am facing a challenge in trying to ...

csswidthcenter