transición de CSS3 arruinando fuentes en webkit?

Question

Desde que agregué una transición css (la primera estaba en vuelo estacionario, la segunda era una animación) parece haber estropeado mis fuentes, se ven "diferentes".

Es totalmente extraño, he buscado durante horas y no puedo encontrar nada en él, ni puedo averiguar exactamente por qué está sucediendo.

Parece que está bien en Firefox, pero safari y Chrome están teniendo problemas.

http://www.simplerweb.co.uk

todo por debajo de la animación de engranajes en la parte inferior izquierda parece mirar como un peso más ligero y la fuente del menú de navegación parece tener el mismo aspecto.

Estoy totalmente perdido en este caso.

Aquí está el CSS para la animación.

.gearone {height:100px; 
width:100px; 
top:-10px; 
left:-10px; 
position:absolute; 
background-position:center; 
background-repeat:no-repeat; 
background-image:url(../images/gearone.png); 
-webkit-animation-name:    backrotate; 
    -webkit-animation-duration:  13s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-transition-timing-function:linear; 


-moz-animation-name: backrotate; 
    -moz-animation-duration: 13s; 
     -moz-animation-timing-function: linear; 
    -moz-animation-iteration-count: infinite; 
} 

.geartwo {height:100px; 
width:100px; 
position:absolute; 
background-position:center; 
background-repeat:no-repeat; 
background-image:url(../images/gearone.png); 
top:20px; 
left:10px; 

-webkit-animation-name:    rotate; 
    -webkit-animation-duration:   13s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-transition-timing-function:linear; 


    -moz-animation-name: rotate; 
    -moz-animation-duration: 13s; 
     -moz-animation-timing-function:linear; 
    -moz-animation-iteration-count: infinite; 

} 


@-webkit-keyframes rotate { 
    from { 
    -webkit-transform: rotate(0deg); 

    } 
    to { 
    -webkit-transform: rotate(360deg); 

    } 
} 

@-moz-keyframes rotate { 
from { 

    -moz-transform: rotate(0deg); 
    } 
    to { 

    -moz-transform: rotate(360deg); 
    } 
} 



@-webkit-keyframes backrotate { 
    0% { 

     -webkit-transform: rotate(360deg); 
    } 
    100% { 

     -webkit-transform: rotate(0deg); 
    } 
} 
@-moz-keyframes backrotate { 
    0% { 
     -moz-transform: rotate(360deg); 

    } 
    100% { 
     -moz-transform: rotate(0deg); 

    } 
} 

Answer 1

Lo que está viendo es que webkit suaviza su texto porque lo trata como una textura en lugar de un vector. No hay mucho que pueda hacer, aparte de no usar transformaciones, o usar un reemplazo de texto para proporcionar una imagen en lugar de su tipo.

Hay un few related threads con respecto al alias de webkit, pero personalmente no he tenido mucha suerte manteniendo el tipo como tipo y todavía usando transformaciones.

Answer 2

No estoy exactamente seguro de la razón por qué que está sucediendo, pero que parece cuando su .geartwo elemento (100px x 100px) se superpone el texto, parece que la ilumina. Cuando sale de él, vuelve a la normalidad. Yo también noto esto solo en los navegadores webkit.

Para solucionarlo, puede configurar el equipo width y height a 40px (que es el tamaño de la imagen de todos modos - No veo la necesidad de que sea 100px x 100px), y luego volver a la posición que en consecuencia.

EDITAR: No estoy seguro de que deba hacer esto después de mi proposición, pero encontré this related discussion después de un poco de búsqueda.

Answer 3

tuve el mismo problema. wile la ejecución de una transición de webkit algún texto de ancla se convirtió en antialiased. después de muchos intentos, he encontrado que esto ocurre solo en elementos que están posicionados y tienen un índice Z dentro de otros elementos posicionados también y con z-index.

#footer { 
    bottom: 0; 
    left: 330px; 
    right: 100px; 
    height: 75px; 
    background-color: #231f20; 
    min-width: 540px; 
    min-height: 75px; 
    position: fixed; 
    z-index: 10; 
} 

el interior del pie de página que tengo

#cityNav > ul > li a { 
      font-size: 24px; 
      text-transform: uppercase; 
      position: relative; 
      z-index: 110; 
      line-height: 24px; 
      height: 24px; 
      display: block; 
     } 

y este es mi transición

.circle { 
     position: absolute; 
     top: 0; 
     left: 0; 
     display: block; 
     background-color: #ff0000; 
     width: 20px; 
     height: 20px; 
     cursor: pointer; 
     text-indent: -999em; 
     -webkit-border-radius: 50%; 
     -moz-border-radius: 50%; 
     -o-border-radius: 50%; 
     border-radius: 50%; 
     -webkit-transition: all .2s ease-out; 
     -moz-transition: all .2s ease-out; 
     -o-transition: all .2s ease-out; 
     transition: all .2s ease-out; 
    } 
    .circle:hover { 
     -webkit-transform: scale(2); 
     -moz-transform: scale(2); 
     -o-transform: scale(2); 
     transform: scale(2); 
    } 

Answer 4

Creo que tuve un problema similar, y lo fija para mí estaba añadiendo

-webkit-font-smoothing: antialiased; 

a mi cuerpo css. Cuando ocurre una animación de cualquier tipo, webkit intenta antializar el texto para ayudar con la animación, por lo que agregarlo para empezar evita que cambie o se vea diferente.

Answer 5

he enfrentado a este tema varias veces y he tenido éxito añadiendo el siguiente CSS para el elemento animado:

z-index: 60000; 
position: relative; 

Parece que necesita tanto z-index y posición para ser eficaz. En mi caso, lo estaba usando con rotuladores animados de Font Awesome.

Answer 6

Como se indicó anteriormente, -webkit-font-smoothing: antialiased; funciona en Safari de escritorio. Pero en iOS, necesita usar -webkit-backface-visibility: hidden; para arreglar esto.

Answer 7

Estaba teniendo este problema en Chrome para OSX. Usar -webkit-backface-visibility: hidden; solucionó el problema.

Answer 8

Para iOS8, la única manera tuve éxito en la eliminación de los parpadeos transformación fue añadiendo

body * { -webkit-transform: translate3d(0, 0, 0); }

a mi hoja de estilo.

Answer 9

Todo lo que necesita hacer es añadir esta regla CSS a cualquier elemento que está viendo el parpadeo en:

-webkit-transform-style: preserve-3d; 

Y eso es todo.

Answer 10

Mientras -webkit-backface-visibility: hidden; es una solución parcial; realmente arruina la visualización de su texto, especialmente si tiene suavizado/AA habilitado. Este error también es desagradable, ya que solo ocurre cuando también está utilizando la propiedad de transformación.

Después de aproximadamente 2 años de visitar esporádicamente este tema cada dos meses, encontré una solución. Necesita agregar un position:relative al elemento css que se está animando. Sin embargo, hay una trampa, que necesita para darle un valor z-index que es mayor o menor que el elemento que ve la distorsión en. Esto lo arregla al 100%.

Dado que el tema no tiene una respuesta "definitiva", espero que esta respuesta ayude a alguien que estuvo en el mismo barco en el que estuve durante años.