Error de Firefox 4 con CSS3 y transition

@ 22 . marzo . 2011

Si bien Firefox 4 trae muchas mejoras y entre estas esta su soporte para muchas nuevas funciones de CSS3, he encontrado un error de renderizado de texto con la propiedad transition para un transform aplicado a un texto de cierto tamaño.

Por ejemplo, usando Firefox 4 se fijaran que al poner el cursor encima del siguiente texto de 100px, no hay cambios en su grosor ni pixelado:

Aeromental

Pero si cambiamos el tamaño del texto a 18px, algo raro pasa, en el momento de la animación (del movimiento) el texto se hace más delgado y al final cuando ya no se mueve el texto se vuelve más grueso.

Pon tu Mouse: Probando propiedades CSS3 en Firefox 4

Al menos esto me pasa con Firefox 4 en Windows 7. ¿A Ustedes?

Chrome y Safari

Esta falla no sucede con Chrome o Safari (ambos usan webkit) en ambos la frase nunca cambia de grosor sin importar su tamaño, y se ve muy fluida la animación de texto (aun teniendo sombra), de ahí que no creo que sea por el ClearType de Windows, sino por el mismo render de Firefox.

PD.- como se habrán dado cuenta este mismo fallo sale en la frase aleatoria de nuestro header (donde incluso es un poco más notorio). Se agradece si alguien encuentra una solución.

Autor del post: DanielSemper: @aeromental + Facebook

Navegadores
«
»
← 
Newer Comments  →
  • Carlos

    yo lo veo perfecto Windows 7 x86 Firefox 4

  • AAR

    Confirmado en Firefox 4 sobre Ubuntu 10.04

  • AAR: ¿Confirmado que si te sale el error o que no te sale?

  • @Shadow_troublem

    se ve rudo con el error =D

  • @Shadow_troublem

    Gracias por comentar, pero: “Se ve rudo”, es una frase que desconozco, ¿eso es bueno o malo? ;)

  • antonio.

    En firefox sobre ubuntu va bien se ve igual que en chrome.

  • Shigure Souma

    Sin error en mi windows 7… aunque ahora que miro bien la ventana, arriba a la izquierda, al lado del menu naranja… hay unos pixeles sueltos. Un pequeño cuadradito blanco :-S

  • Ikki Spartan

    “Se ve rudo” es una forma decir que te gusta como se ve…

  • Alvaro

    Hay que tener ojo de diseñador para notarlo, pero se nota… el FF siempre tuvo su punto más débil en el rendereo de texto y si no me equivoco utiliza el render del sistema operativo. Chrome y Safari usan sus propios engines de rendereo, es por eso que la misma tipografía tiene un atialiasing distinto.

    Pero es un bug minimo comparado con la sutileza de la animacion, de hecho en el FX4 se nota mucho menos pixelado el texto en angulo que en las versiones 3.x

  • saiseihogo

    Firefox 4 en ubuntu 10.10: todo normal.
    Firefox 4 en Windows 7 x86: todo normal.

    Tanto en el texto de 100px como en el 18px e igual en el del header.

    Creo que el problema aquí es que el tamaño de la fuente la defines con px, siendo que esto no es sugerido por diversos problemas de como lo interpreta cada navegador. Te recomiendo cambies todas las propiedades a “em” en lugar de “px”.
    Si necesitas ayuda para eso sabes cómo contactarme.

  • Gracias saiseihogo.

    Conozco em, y he probado de cambiar el texto a em, y aún así el error que veo sigue, y para mi si es algo muy notorio a la hora de ver la animación.

    Será raro pero prefiero usar px en fonts, me da más precisión y control a la hora de cambiar un solo font del diseño sin intervenir en las herencias de los demás :)

  • luis

    FF4 – Fedora 12 OK

  • Dani

    ptm! tanto lio por eso? Seguro que h ay que tener vista de diseñador para notarlo, pero cuantos diseñadores te visitan eh?

  • Neilandio

    yo no vi ningun error, el texto aumenta su tamaño proporcionalmente al recuadro (eso si se pixelea un poco)

  • Marcelo

    Firefox 4 en XP SP2:

    Resultado Actual: El texto 2 sale en negrita en los frames inicial y final pero no dentro la transicion, pierde negrita.

    Resultado Esperado: Texto no debe cambiar propiedades en la transicion ni en el final, deberia mantenerse el mismo.

←  
Newer Comments  →