Blurry text in Internet Explorer

Question

On my website I have noticed that there is a substantial difference in text quality between Firefox, Chrome, and Internet Explorer. While the text is crystal clear in Chrome, and even more so in Firefox, it seems blurred and out-of-focus in Internet explorer. Here is a picture comparison:

Personally I think it is not aesthetically pleasing to the eye. I would like to find a solution without asking users to use plugins like Microsoft Silverlight, as not all users will want to install a plugin just to view 1 website. I don't understand how websites like Facebook and StackOverflow don't have this problem (or at least less of a problem).

I've tried using CSS filters, different font-rendering properties, and using different units for font-size, but I'm seeing no effect. I know I haven't tried all possible CSS property combinations so this could still be the answer.

I've been scouring the web and StackOverflow for hours now, and have yet to find a solution. There are other similar questions here but they remain unanswered.

Any help, or idea of where to go or what to do, is very much welcomed. Run this Snippet in different browsers if you can't see the image or website:

html,body{
  margin:0;
  height:100%;  
  font: normal 14px/24px "Lucida Sans Unicode","Lucida Grande", "Arial", sans-serif;
}
.popup{
  position:relative;
  top:50%;
  left:50%;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  white-space: nowrap;
  background-color:rgb(28, 31, 37);
  color:white;
  padding:1em;
  z-index:2;
  transform: translate(-50%,-50%);

  -webkit-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.75);
}
p{
  font-size: small;
}
input{
  padding: 16px 12px;
  width: 250px;
  border: 0;
  background: #0A0A0A;
  color: #eee;
  font-size: 14px;
  font-family: "Open Sans",sans-serif;
  -webkit-box-shadow: inset 0 0 0 1px #323742;
  -moz-box-shadow: inset 0 0 0 1px #323742;
  box-shadow: inset 0 0 0 1px #323742;
}
#blackout {
  background: rgba(17,19,23,.5);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  cursor: pointer;
}

<div id="blackout"></div>
<div class="popup">
  <h1>Compare this text</h1>
  <p>And this text as well</p>
  <input type="text" placeholder="Even placeholders are blurry">
</div>

Strangely, the Snippet looks similar in different browsers: but looking carefully there are definite differences though. Chrome (Version 44.0.2403.125 m) seems to have a sharp edge effect. IE (11) seems to have a slight blur. Whereas Firefox (38.0.1), as explained by @user4749485, seems to have selected the best of both worlds to achieve the best legibility. Is there a way to manually calculate and adjust the font for IE only? (Another possible method to fix it.)

I'm not sure where the rest blur is coming from (the Snippet's text seems clearer here, than the text on my website). If we can uncover where this difference comes from then perhaps this will be easier to solve. (I have been adding/removing CSS to the Snippet so forgive all the edits)

TL:DR, and just to elaborate the question: I would like the text to look clear in IE like it does in Firefox or Chrome.

---

Comparison for Sergey Denisov's answer:

While I could use Srikanth Pullela's answer to apply this CSS transform to IE only, I am curious as to whether there is an all browser fix. Edit: I'll use method mentioned above as the proposed fix causes this to happen meaning I can't rely on GPU rendering to render it correctly:

Answer 1

The only thing I suggest is to use the code below and write separate CSS, so when opened in IE it will take that css only.

This will target only earlier versions of IE8:

 <!--[if lt IE 8]>
<link href="./Content/ie7.css" rel="stylesheet" />
  <![endif]-->

If you want to target all IE versions, use this:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />

Answer 2

Did you try to add translateZ(0) for your popup? In your case it could be:

.popup {
    ...
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    ...
}

In IE11 on Windows 8.1 the font looks better:

html, body {
    margin: 0;
    height: 100%;
    font: normal 14px/24px "Lucida Sans Unicode", "Lucida Grande", "Arial", sans-serif;
}

.popup {
    position: relative;
    top: 50%;
    left: 50%;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    white-space: nowrap;
    background-color: rgb(28, 31, 37);
    color: white;
    padding: 1em;
    z-index: 2;

    -webkit-filter: blur(0);
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);

    -webkit-box-shadow: 0px 0px 14px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 14px -2px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 14px -2px rgba(0, 0, 0, 0.75);
}

p {
    font-size: small;
}

input {
    padding: 16px 12px;
    width: 250px;
    border: 0;
    background: #0A0A0A;
    color: #eee;
    font-size: 14px;
    font-family: "Open Sans", sans-serif;

    -webkit-box-shadow: inset 0 0 0 1px #323742;
    -moz-box-shadow: inset 0 0 0 1px #323742;
    box-shadow: inset 0 0 0 1px #323742;
}

#blackout {
    background: rgba(17, 19, 23, 0.5);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    cursor: pointer;
}

<div id="blackout"></div>
<div class="popup">
    <h1>Compare this text</h1>
    <p>And this text as well</p>
    <input type="text" placeholder="Even placeholders are blurry">
</div>

P.S. Added -webkit-filter: blur(0) to fix blurring text in Chrome 44 on Windows 7/8.1 from this post.

Answer 3

Use Embedded OpenType (EOT) file (.eot or .ote format) of that font-family which you are using.

Answer 4

1. Open IE Tools and select Internet Options.
2. Then go to Advanced and unchecked "Always use ClearType for HTML".

Answer 5

I have faced same issue within IE-11 windows 10, finally able to resolve it through replacing translate3d(tx, ty, tz) with translate(tx,ty)

Old usage

.show_panel { transform: translate3d(0, 100%, 0); }

New Usage

.show_panel ( transform: translate(0, 100%); }

and it worked for me, for details: https://github.com/angular/material/issues/4544

Answer 6

Actually this seems to be due to rounding errors. If you encounter the problem with a resizeable window the fixes suggested here wont work. If the text get blurred for a specific size with 2d translate, you can fix it by using 3d translate and vice versa. however, if the window is resized there will always be certain window sizes that result in blurred text.

Answer 7

I got this resolved doing the following: Internet Explorer 11 > Tools > Options > Advanced: Accelerated Graphics: Use software rendering Yes Accesibility: all check-boxes as No