html - para - traducir pagina web automaticamente

Fuente se ve borrosa después de traducir en Chrome

Question

EDITAR 2016-07-04 (ya que esta pregunta se está volviendo popular): este es un error en Chrome . Los desarrolladores están trabajando activamente en una solución .

EDITAR 2017-05-14 El error parece haberse solucionado, la solución se introducirá en Chrome 60

EDITAR 2018-05-04 Se ha fusionado una solución, pero el error todavía parece estar presente .

Así que tengo esta ventana de aspecto muy feo que está centrada en la pantalla por este CSS:

.popup
{
position: fixed;
top: 0;
bottom: 0;
transform: translate(-50%, -50%);
}

Sin embargo, se ve así en Chrome (la fuente se ve muy borrosa):

Pero así en Firefox:

Cuando elimino la regla de transform , el texto se ve bien y crujiente nuevamente, pero luego ya no está centrado correctamente.

Cuando voy a chrome://flags y ejecuto #disable-direct-write se ve mejor, pero los usuarios obviamente no van a hacer eso y no resuelven el problema.

¿Cómo puedo hacer que mi fuente se vea bien mientras todavía tengo la ventana centrada?

Mi versión de cromo es 44.0.2403.155

Tengo una demostración de three.js utilizando WebGL que se representa en un lienzo de fondo. Cuando deshabilito la demo, el problema ya no ocurre.

JSFiddle con el fondo .

JSFiddle sin el fondo .

Answer 1

Descubrí que -webkit-filter: blur(0) podría corregir su fuente borrosa en Chrome en Windows:

JSFiddle

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

Answer 2

Probé todas las soluciones y solo esto está funcionando para mí (Chrome 53)

dialog {
position: fixed;
top: 50%;
transform: translate(0, -50%);
}

Answer 3

Problema en la mitad de píxel.

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

¡Funcionará!

Answer 4

Una sugerencia de la discusión relacionada resolvió el problema por mí: https://.com/a/46117022/7375996

El uso de calc con algún desplazamiento resolvió el problema en mi caso:

transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px));

Answer 5

Usa una normalización de la transformación después de tu animación:

Transformación X / Y normalización

O escalamos la textura con zoom doble, luego volvemos a reducirla. En algunos casos, esto no se puede aplicar debido a otras transformaciones complejas o traducciones, y no es perfecto.

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