Estoy rotación de un elemento mediante -webkit-transform: rotate() y en Chrome 14.0.835.2 dev-m que está haciendo realmente raros cosas para el texto dentro del elemento. Me recuerda un efecto similar se obtiene en Photoshop al rotar el texto usando «suave» anti-aliasing en lugar de «crujiente».

Alguien sabe qué está pasando aquí? Es específico para este webkit o Chrome versión o hay algo que puedo hacer para solucionarlo? (Además, no anti-aliasing de las fronteras entre los elementos de la lista)

Wonky suavizado de texto al rotar con webkit-transform en Chrome

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);
}
  • la fuente parece ser suavizados, pero antes de que la transformación se aplica. La transformación no parece suavizado. Has probado a girar un poco más de lo justo .7deg? Otros parecen tener un poco de problemas similares stackoverflow.com/questions/5078186/…
  • Cambio de la rotación no hace nada por desgracia. El efecto ocurre.
  • cssdeck.com/labs/full/ornh3chv
InformationsquelleAutor Rahul | 2011-07-27

2 Comentarios

  1. 72

    Intentar la activación de la CSS 3d modo de Transformación con webkit. esto cambia la forma en chrome hace

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

    editar

    Hay también una Webkit sólo en la declaración de estilo -webkit-font-smoothing que toma los valores

    • none
    • subpixel-antialiased
    • antialiased

    donde subpixel-antialiased es el valor predeterminado.

    Por desgracia, el subpixel suavizado no es buena solución para girar el texto. La representación de la máquina no puede lidiar con eso. La transformación 3d cambia a sólo antialiased. Pero podemos tratar de configurar directamente.

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

    • Gracias, esto lo arregla! Pero ahora las fuentes son un poco borrosas….
    • Creo que no podemos hacer nada acerca de eso. Trate de negrita o no de fuente en negrita con el color negro tal vez
    • Añadir un color de fondo para el elemento de texto.
    • El translate3d método ha funcionado para mí, pero sí que desenfoca el texto un poco. La edición directa de el -webkit-fuente de suavizado de la propiedad no trabajo para mí, sin embargo. Usted sacrificar la nitidez del texto con este enfoque, pero en general yo creo que se ve mejor que wonky texto
  2. 16

    La borrosa fuentes son causados por un extraño webkit problema invloving -webkit-backface visibilidad. Esto me llevó para siempre a la figura hacia fuera, y no he visto en ningún otro lugar en la web todavía.

    Añado ahora -webkit-backface-visibility: hidden; para el cuerpo de mi sitio como un CSS reset estilo. Ver a afilar las fuentes en todo el sitio, es increíble. Estás transformaciones no son 3d, así que esto no afecta en nada, de todos modos, pero si usted decide hacer transformaciones 3d en algún lugar en el sitio acaba de volver a agregar -webkit-backface-visibility: visible; para el elemento específico. También debe corregir el parpadeo demasiado.

    • No hacer esto. Qué es esto de manera efectiva haciendo es activar -webkit-font-smoothing: antialiased en su totalidad de la página, que en realidad es un paso atrás desde el valor predeterminado -webkit-font-smoothing: subpixel-rendering. Consulte por Favor, Dejar de «Arreglar» el Suavizado de Fuente para más de fondo.
    • Yo veo lo que estás diciendo, pero el resultado visible es increíblemente mejor. Los dispositivos móviles no uso de sub-píxeles de representación de todos modos, así que esto no les afecta. Esto también revisiones de la lámina, que es un gran problema y en mi opinión algo que simplemente no se puede vivir con. Puedes sugerir una mejor manera de detener el parpadeo y procesamiento de las fuentes correctamente? Además, puede definir explícitamente -webkit-font-suavizado: subpixel de representación;
    • Tal vez usted debe publicar una nueva pregunta con esos puntos para que puedan ser contestadas por separado, creo que estamos con el tema de los comentarios aquí.
    • Tal vez, pero creo que los usuarios que ahora visita a esta pregunta también va a querer saber la respuesta. Usted no ofrecen ningún tipo de solución para el problema, sólo dijo que mi solución era incorrecta. Por otra parte, el caso de la sub-pixel de representación es todavía una cuestión de opinión. Muchos de los navegadores y OS hago funky cosas con sub-pixel de representación, y pueden afectar el diseño. Sub-pixel de la representación también se apaga automáticamente durante css transformaciones, causando todo tipo de problemas. Con la prevalencia de css transformaciones en el desarrollo de hoy veo un caso fuerte para el uso de anti-alias de representación a nivel mundial
    • Esto parecía funcionar para mí. Yo no veo ningún cambio en el resto del texto de la página de la representación cuando se aplican a un elemento específico que fue animado.
    • usted puede arreglar por normalizating el flotador de píxeles stackoverflow.com/a/42256897/1834212

Dejar respuesta

Please enter your comment!
Please enter your name here