Blurry text in Internet Explorer

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: Popup with translateZ(0) hack

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.


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

Tags:

Html

Css

Internet Explorer

Recent Posts