web-dev-qa-db-fra.com

Texte flou dans Internet Explorer

Sur mon site Web, j'ai constaté une différence substantielle de qualité de texte entre Firefox, Chrome et Internet Explorer. Bien que le texte soit parfaitement clair dans Chrome, et plus encore dans Firefox, il semble flou et flou dans Internet Explorer. Voici une comparaison d'image:

 Screenshot comparison of Firefox and IE

Personnellement, je pense que cela n’est pas esthétique. J'aimerais trouver une solution sans demander aux utilisateurs d'utiliser des plugins tels que Microsoft Silverlight, car tous les utilisateurs ne voudront pas installer un plugin uniquement pour afficher un site Web. Je ne comprends pas comment des sites comme Facebook et StackOverflow n'ont pas ce problème (ou du moins moins de problème). 

J'ai essayé d'utiliser des filtres CSS, différentes propriétés de rendu de police et différentes unités de taille de police, mais je ne vois aucun effet. Je sais que je n'ai pas essayé toutes les combinaisons de propriétés CSS possibles, alors cela pourrait toujours être la solution.

Cela fait des heures que je parcours le Web et StackOverflow et je n'ai pas encore trouvé de solution. Il y a d'autres questions similaires ici mais elles restent sans réponse. 

Toute aide ou idée d’où aller ou de quoi faire est la bienvenue. Exécutez cet extrait dans différents navigateurs si vous ne pouvez pas voir l'image ou le site Web:

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>

Étrangement, l'extrait ressemble à différents navigateurs: mais, en regardant de plus près, il y a cependant des différences. Chrome (version 44.0.2403.125 m) semble avoir un effet Edge net. IE (11) semble avoir un léger flou. Alors que Firefox (38.0.1), comme expliqué par @ user4749485, semble avoir sélectionné le meilleur des deux mondes pour obtenir la meilleure lisibilité. Existe-t-il un moyen de calculer et d’ajuster manuellement la police pour IE uniquement? (Une autre méthode possible pour résoudre ce problème.)

Je ne suis pas sûr de la source du flou restant (le texte de l'extrait semble plus clair ici que celui de mon site Web). Si nous pouvons découvrir d'où vient cette différence, il sera peut-être plus facile à résoudre. (J'ai ajouté/enlevé CSS à l'extrait, donc pardonnez toutes les modifications)

TL: DR, et juste pour préciser la question: Je voudrais que le texte soit clair dans IE comme dans Firefox ou Chrome.

Comparaison de la réponse de Sergey Denisov:

 Chrome and IE before and after picture comparison Bien que je puisse utiliser la réponse de Srikanth Pullela pour appliquer cette transformation CSS à IE uniquement, je suis curieux de savoir s'il existe un correctif pour tous les navigateurs . Edit: J'utiliserai la méthode susmentionnée car le correctif proposé provoque cela, ce qui signifie que je ne peux pas compter sur le rendu GPU pour le rendre correctement:

 Bugged look of the popup

htmlcsscss3internet-explorer
27
jaunt

Avez-vous essayé d'ajouter translateZ (0) pour votre popup? Dans votre cas, cela pourrait être:

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

Dans IE11 sous Windows 8.1, la police a meilleure apparence:  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. Ajouté -webkit-filter: blur(0) pour corriger le texte flou dans Chrome 44 sous Windows 7/8.1 à partir de this post .

5
Sergey Denisov

La seule chose que je suggère est d'utiliser le code ci-dessous et d'écrire du code CSS séparé. Ainsi, une fois ouvert dans IE, il ne prendra que le css 

Cela ciblera uniquement les versions antérieures de IE8:

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

Si vous souhaitez cibler toutes les versions IE, utilisez ceci:

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

8
Srikanth Pullela

Utilisez un fichier EOT (Embedded OpenType) (format .eot ou .ote) de la famille de polices que vous utilisez. 

4
Subodh Sharma
  1. Ouvrez les outils IE et sélectionnez Options Internet.
  2. Ensuite, allez à Advanced et décochez "Toujours utiliser ClearType pour HTML".
3
user4850722

En fait, cela semble être dû à des erreurs d'arrondi. Si vous rencontrez le problème avec une fenêtre redimensionnable, les corrections suggérées ici ne fonctionneront pas. Si le texte devient flou pour une taille spécifique avec 2d translate, vous pouvez le corriger en utilisant 3d translate et inversement. Toutefois, si la fenêtre est redimensionnée, il y aura toujours certaines tailles de fenêtre qui entraîneront un texte flou.

0
beggers

J'ai rencontré le même problème dans IE-11 Windows 10, enfin capable de le résoudre en remplaçant translate3d (tx, ty, tz) par translate (tx, ty)

Ancien usage

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

Nouvelle utilisation

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

et cela a fonctionné pour moi, pour plus de détails: https://github.com/angular/material/issues/4544

0
Waqas Ahmed