web-dev-qa-db-fra.com

La police semble floue après la traduction en Chrome

EDIT 2016-07-04 (Étant donné que cette question devient populaire): Il s'agit d'un bogue dans Chrome . Les développeurs sont travaillent activement sur un correctif .

EDIT 2017-05-14 Le bug semble être corrigé, le correctif sera introduit dans Chrome 6

EDIT 2018-05-04 Un correctif a été fusionné, mais le bogue semble toujours être présent .

J'ai donc cette fenêtre très moche qui est centrée sur l'écran par ce CSS:

.popup
{
   position: fixed;
   top: 0;
   bottom: 0;

   transform: translate(-50%, -50%);
}

Cependant, cela ressemble à ceci sur Chrome (la police a l'air vraiment floue):

Chrome

Mais comme ça sur Firefox:

enter image description here

Lorsque je supprime la règle transform, le texte semble à nouveau agréable et croustillant, mais il n'est plus correctement centré.

Quand je vais à chrome://flags et exécutez #disable-direct-write c'est plus joli, mais les utilisateurs ne le feront évidemment pas et cela ne résout pas le problème.

Comment puis-je rendre ma police belle tout en ayant la fenêtre centrée?

Ma chrome est 44.0.2403.155

J'ai un three.js démo utilisant WebGL qui s'affiche sur un canevas d'arrière-plan. Lorsque je désactive la démo, le problème ne se produit plus.

JSFiddle avec l'arrière-plan .

JSFiddle sans le fond .

htmlcssgoogle-chromechromium
30
joppiesaus

Problème dans la moitié du pixel.

Essayez: transform: translate(-50%, -51%);

Ça va marcher!

6
egor.xyz

Une suggestion de la discussion connexe a résolu le problème pour moi: https://stackoverflow.com/a/46117022/7375996

L'utilisation de calc avec un certain décalage a résolu le problème dans mon cas:

transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px));
4
Dmitry.Kolosov

J'ai découvert que -webkit-filter: blur(0) pouvait corriger votre police floue dans Chrome sous Windows:

JSFiddle

#projectPopup {
    ...
    -webkit-filter: blur(0);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
3
Sergey Denisov

Utilisez une normalisation de la transformation après votre animation:

Transformer la normalisation X/Y

Ou Nous redimensionnons la texture avec un zoom double, puis redimensionnons à nouveau. Dans certains cas, cela ne peut pas être appliqué en raison d'autres transformations ou traductions complexes, et n'est pas parfait.

...{
zoom:2;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
1
Miguel

J'ai essayé différentes solutions dans différentes combinaisons, parfois effrayantes:

  • translate3d Au lieu de translateY
  • zoom:2; transform: scale(0.5); ou zoom:0.5; transform: scale(2);
  • transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px));
  • -webkit-filter: blur(0);
  • perspective: 1000px
  • scale(1.0, 1.0)
  • -webkit-font-smoothing: subpixel-antialiased;

aucun d'entre eux ne travaille en juillet 2019.

La seule solution que j'ai trouvée pour les modaux, qui devrait être centrée - pour utiliser un alignement flexbox au lieu de transformer: translate.

.modal__container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}

  .modal {
    box-sizing: border-box;
    max-width: 80%;
    max-height: 80%;
    padding: 20px;
    overflow-y: auto;
    background: #fff;
  }
<div class="modal__container">
  <div class="modal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>
1
Александр Михайлов

2019-04-15, qui m'arrive toujours dans Chrome. Trouvé que le changement position: fixed à absolute l'a corrigé:

.popup
{
   position: absolute;  <-- just like that
   top: 50%;
   left: 50%;

   transform: translate(-50%, -50%);
}

L'utilisation absolue peut ou non convenir à votre cas particulier, juste mes 2 cents.

1
David Suarez

La hauteur des éléments doit être un nombre pair https://prnt.sc/mtxxa2

0
user3382357