css - origin - Texto anti-aliasing de Wonky al rotar con webkit-transform en Chrome

transition css hover

Question

Estoy rotando un elemento usando -webkit-transform: rotate() y en Chrome 14.0.835.2 dev-m está haciendo cosas realmente raras en el texto dentro del elemento. Me recuerda un efecto similar que obtienes en Photoshop cuando giras el texto usando suavizado "suave" en lugar de "crujiente".

Alguien sabe lo que está pasando aquí? ¿Es específico para este webkit o versión de Chrome o hay algo que pueda hacer para solucionarlo? (Tampoco es anti-aliasing los bordes entre los elementos de la lista)

Aquí está el CSS:

div.right-column.post-it
{
  position: relative;
  width: 240px;
  background-color: #fe9;
  padding: 20px;
  -webkit-transform: rotate(.7deg);
  background: #fe9 -webkit-gradient(radial, 20% 10%, 0, 50% 10%, 500, from(rgba(255,250,220,1)), to(rgba(255,238,253,0)));
  box-shadow: 1px 1px 0 #ddccaa, 
            2px 2px 0 #dbcaa8,
            3px 3px 0 #d9c8a6,
            4px 4px 0 #d7c6a4,
            5px 5px 0 #d5c4a2,
            6px 6px 1px #d3c2a0,
            4px 4px 2px rgba(90,70,50,.5),
            8px 8px 3px rgba(90,70,50,.3),
            12px 12px 5px rgba(90,70,50,.1);
}

Answer 1

Las fuentes borrosas son causadas por un problema extraño de webkit invloving -webkit-backface-visibility. Esto me llevó mucho tiempo para descubrirlo, y todavía no lo he visto en ningún otro lugar de la web.

Ahora agrego -webkit-backface-visibility: hidden; al cuerpo de mi sitio como un estilo de restablecimiento de CSS. Míralo afilar las fuentes en todo tu sitio, es increíble. Tus transformaciones no son 3d, así que esto no afectará a nada de todos modos, pero si decides realizar transformaciones 3D en otro lugar de tu sitio, simplemente vuelve a agregar -webkit-backface-visibility: visible; al elemento específico. También debería arreglar el parpadeo también.

Answer 2

Intente activar el modo CSS 3d Transform con webkit. esto cambia la forma en que se renderiza Chrome

-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);

editar

También hay una declaración de estilo de Webkit -webkit-font-smoothing que toma los valores

• none
• subpixel-antialiased
• antialiased

donde subpixel-antialiased es el valor predeterminado.

Por desgracia, los antialias de subpixel no son una buena solución para el texto girado. La máquina de renderizado no puede manejar eso. La transformación 3D cambia a solo antialiased . Pero podemos intentar establecerlo directamente.

Mira aquí http://maxvoltar.com/archive/-webkit-font-smoothing