Evite transiciones CSS "vacilantes" en elementos con texto insinuado (ajustado a la cuadrícula)

Estoy intentando aplicar algunas transiciones CSS3 en algunos encabezados en un sitio web en el que estoy trabajando, pero hay algo sobre transiciones en elementos que contienen texto eso realmente me molesta: en los navegadores que aplican sugerencias o cuadrícula para los glifos de una fuente (que supongo que es la mayoría de ellos, excepto quizás Safari), hay un 'salto' notorio al principio y al final de una transición donde se puede ver ese texto vuelve a la cuadrícula de píxeles, como se demuestra en este jsfiddle: http://jsfiddle.net/8csA9/20/ (parte de esto es probablemente un "borrón" momentáneo debido al filtrado, pero definitivamente hay alguna modificación de forma aquí, al menos en FF y Chrome)Evite transiciones CSS "vacilantes" en elementos con texto insinuado (ajustado a la cuadrícula)

Normalmente, ni siquiera consideraría jugar con las complejidades del renderizado de fuentes, pero considere Si los glifos son tan grandes, creo que realmente no importa en este caso, y me preguntaba si hay alguna forma de desactivar la sugerencia o alguna otra forma de hacer que estas transiciones sean más suaves. ¿Alguien sabe si esto se puede hacer y cómo?

PD: Esta pregunta en realidad se extiende un poco más allá de las transiciones, simplemente aplicando una rotación estática también hace al menos Firefox continuar a insinuar el texto, y el resultado termina pareciéndose más bien .. impares

PPS: No hace parece existir (o ha existido) una propiedad '-webkit-font-smoothing', pero el borrador de fuentes CSS3 parece haber descartado la regla en la que se basaba (font-smooth), y parece que solo funcionó en Chrome para Mac

Fuente

2012-03-14 aphax

Cómo intrigante! Esperaría que la renderización de fuentes fuera manejada por el sistema operativo de forma nativa y luego transformada (como cualquier otro elemento), claramente este no es el caso. Supongo que su principal preocupación es la inquietud de la transición en lugar de la preferencia por un estado en particular. Me pregunto si podría engañar al motor de renderizado para que piense que la transición está en curso. –

Sí, exactamente, básicamente estoy bien con el SO haciendo lo que quiera (o el usuario quiera) con el texto, es solo que me gustaría que la animación sea menos nerviosa/nerviosa.Inicialmente, asumí que simplemente aplicando cualquier tipo de transformación que hace que el ajuste de la grilla sea menos útil (como una rotación muy pequeña) haría que la sugerencia permanezca desactivada, pero lamentablemente ese no parece ser el caso. Su idea de engañar al navegador en una transición continua es interesante, aunque – aphax

@aphax Estás en lo cierto cuando dices todo eso. Sucede He estado tratando de encontrar una solución a eso por bastante tiempo, pero lo único que he podido encontrar es tener pequeñas transiciones de este tipo. Quiero decir, en lugar de mover algo por '5px', moverlo solo por' 1px'. Parecería menos desigual esa vez. Y lo diré de nuevo, no parece de ninguna manera arreglar esto. – Aniket

Use backface-visibility: hidden; ** Actualización: mz MOZ WebKit y el estándar http://jsfiddle.net/jugularkill/58S2z/4/

Más sobre la visibilidad cara trasera: http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp

Fuente

2012-03-24 16:23:36 Undefined

Me podría estar perdiendo algo, pero en FF 12 este violín se ve idéntico al de OP. Todavía hay jitter y retraso al principio y al final. –

Interesante, esto parece hacer que el nerviosismo desaparezca en Chrome 18, pero no en Firefox 11. Viendo lo que se supone que debe hacer esta propiedad, parece que esto simplemente es un efecto secundario de cómo esto se implementa en Chrome, pero aún así, una interesante solución de problemas – aphax

Sé que es una publicación anterior, pero por el bien de otros ... Debe usar los prefijos del navegador (-moz, -webkit, ...) para poder hacerlo trabajo. – Raffael

Esto funcionó como un encanto para mí. Añadí "backface-visibility: hidden" (además de los principales prefijos del navegador) a los elementos con la propiedad de transición, y se corrigió el salto/jitter que estaba experimentando durante la transición. Probé en Firefox, IE (9/10) y Chrome.

Una cosa que noté sin embargo: asegúrese de agregar la propiedad al estado natural del elemento, a diferencia de la pseudo-clase (por ejemplo, hover, active ...) de un elemento.

Fuente

2013-04-26 14:46:25 blizzrdof77

Si está usando Bootstrap puede utilizar esta clase:

.backface-visibility(hidden);

Fuente

2013-12-05 09:58:56

Adición transform: translate3d(0, 0, 0); o transform: translateZ(0); a menudo ayuda a corregir los errores de transición, ya que obliga navegador para utilizar las transiciones 3D acelerados por hardware.

Fuente

2016-06-14 18:58:01 Julia

Para mí, encontré que necesitaba agregar backface-visibility: hidden y transform-style: preserve-3d al elemento que contenía el contenido de jumpy.

Por ejemplo:

.element-with-jumpy-content { 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    backface-visibility: hidden; 
}

Fuente

2016-12-08 04:36:37

Evite transiciones CSS "vacilantes" en elementos con texto insinuado (ajustado a la cuadrícula)

Respuesta

Cuestiones relacionadas