span - ¿Hay alguna forma de hacer que Chrome realice las transiciones de CSS con espacios entre letras sin problemas?
salto de linea html sin br (7)
¿Por qué no usar un poco jQuery para resolver esto? Aquí está el violín http://jsfiddle.net/aDhRz/
(function(){
$(''p'').hover(function(){
$(this).toggleClass(''zero'');
});
})();
Y css
.zero{
letter-spacing:0;
}
Estoy intentando tener una buena transición de CSS para la propiedad de espacio entre letras.
Se ve muy bien en Firefox e Internet explorer 10 (algo finalmente funciona como se espera en IE. Omg, ¿verdad?)
Pero no funciona en Chrome u Opera. En Chrome es una serie de temblores, por lo que va de 2px a 1px a 0. No hay representación de píxeles suaves como en IE / Firefox.
¿Hay alguna manera de hacer que Chrome lo haga sin problemas?
Aquí hay un ejemplo simple:
p {
letter-spacing:2px;
-webkit-transition: letter-spacing, 1s;
-moz-transition: letter-spacing, 1s;
-o-transition: letter-spacing, 1s;
transition: letter-spacing, 1s;
}
p:hover {letter-spacing:0;}
En su ejemplo, no es posible hacerlo sin problemas ya que la transición se reduce en 1px en cada paso, funciona igual que cualquier otra propiedad css que utiliza píxeles. Si aumenta la px , verá que realmente se procesa sin problemas, como en este ejemplo. Demo
Si agrega un cambio menor en píxeles a otra propiedad de píxeles con una larga duración, verá el mismo efecto de visibilidad de pasos como en esta Demo
Por lo tanto, la única forma en que esto sería posible es si pudieras decirle a Chrome que cambie el paso a algo como 0.1px pero desafortunadamente no puedes hacer eso.
Así que decir todo eso y descubrir que hace lo mismo en todas las propiedades si agrega ese tipo de combinación (cambio + transición) diría que esto no es un error.
Este problema ahora se ha solucionado en Blink (activando el motor de diseño de Chrome) pero aún no se ha implementado en Chrome estable. Pero puedes ver que está funcionando bien ahora en Chrome Canary.
Hasta que esté disponible para todos, no creo que haya una solución alternativa sin una solución de JavaScript con canvas . Tenemos suerte de actualizaciones automáticas de Chrome :)
Corrección de parpadeo : http://src.chromium.org/viewvc/blink?view=revision&revision=153727
Parece que Google está tomando en serio el desarrollo de Blink, porque este error existe en WebKit desde 2008, y aún no está solucionado.
Informe de error de WebKit : https://bugs.webkit.org/show_bug.cgi?id=20606
Prueba esto
p {
letter-spacing:2px;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
p:hover {letter-spacing:0;}
Si tiene problemas de rendimiento en Chrome, puede intentar forzar el elemento en la GPU donde se procesa en su propia capa. Esto se puede hacer usando translate3d
Ejemplo
p{
-webkit-transform: translate3d(0,0,0);
}
También vale la pena utilizar la línea de tiempo de las herramientas de desarrollo de Chrome para reducir cuál es el problema.
Trate de usar em en lugar de px, no es perfecto pero es una mejora. También las velocidades más rápidas no parecen tan inestables.
p {
letter-spacing:0.5em;
-webkit-transition: letter-spacing, 0.5s;
-moz-transition: letter-spacing, 0.5s;
-o-transition: letter-spacing, 0.5s;
transition: letter-spacing, 0.5s;
}
p:hover {
letter-spacing:0em;
}
Utilizar esta
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
antes de su etiqueta. Esto debe resolver su problema.
Las razones para usar esto se explican a continuación por Jukka K. Korpela en un topic .
Según el estándar SGML, su declaración de tipo de documento especifica una Definición de tipo de documento al nombrarla, según lo registrado por el W3C. Sin embargo, según la especificación HTML 4.01, un documento debe tener una de las tres declaraciones alternativas de tipo de documento, y todas ellas también contienen una URL.
Esto es, como tal, una teoría, ya que los navegadores en realidad no leen DTD. Tratan las declaraciones de tipo de documento como cadenas mágicas, en doctype sniffing. Sin embargo, en la mayoría de los navegadores, la elección del modo de un navegador se ve afectada por la presencia o ausencia de una URL en esa cadena mágica para HTML 4.01 Transitional. Cuando está ausente, operan en modo Quirks. Cuando está presente, la mayoría de los navegadores operan en "modo estándar" o "modo casi estándar".
El modo Quirks significa una gran cantidad de peculiaridades diferentes, por lo que el efecto de cambiarlo a "modo estándar" puede implicar casi cualquier cosa (que varía desde ningún efecto hasta un desastre completo). Dicho cambio generalmente requiere una revisión cuidadosa, si no se reescribe, de todo el documento.