Al pasar el cursor sobre la transición de CSS en Safari, se aligera cierto color de fuente

Question

En mi CSS, definí una transición para una clase. Por alguna razón, cuando sobrevivo la clase con la transición, el transition-duration por algún motivo altera el color de la fuente en otro lugar (desde marcadores de posición y ciertos enlaces). (Esto sólo ocurre en Safari por lo que yo puedo decir.)

Aquí hay una jsFiddle que muestra lo que estoy hablando:

http://jsfiddle.net/EJUhd/

¿alguien sabe por qué ocurre esto y cómo puedo prevenir ¿eso?

Answer 1

yo estaba luchando con un problema similar. Para mí, los enlaces aleatorios en toda la página se volvieron aparentemente atrevidos (claramente algo relacionado con OSX y anti-aliasing en Safari, como Chrome (en Windows 7 y OSX) y la misma versión de Safari en Windows funcionaba bien.

la solución no es obvia, y dependiendo de lo que está haciendo puede no ser óptima, pero la adición de esta línea de código fija el tema:

-webkit-transform: translateZ(0); 

básicamente, esto desencadena la GPU para hacer la animación, y el texto sin Ya tenía artefactos en mi sitio. Tenga en cuenta que no siempre es apropiado usarlo, ya que puede usar más batería y usar más recursos.A veces, sin embargo, utiliza menos, por lo que básicamente verifica el rendimiento cuando lo agregas.

Agregue esto al estado normal no el: estado animado de desplazamiento.

img { -webkit-transform: translateZ(0); } 

A diferencia de en el:

img:hover { /* not here */ } 

El otro efecto secundario muy positivo es que dependiendo de la animación que está haciendo, que podría ser más suave a través de la GPU. Entonces no obtendrás la animación entrecortada que mencionas en tu publicación de seguimiento. En mi caso, la animación fue más fluida en safari. Estaba haciendo una escala del 120% y una rotación de 5 grados de una imagen con algunas sombras de caja que aparecen al mismo tiempo. En mi situación, no redujo el uso de CPU desafortunadamente.

Answer 2

No puedo comenzar a decirte por qué lo hace, pero Safari no está cambiando el color del texto, está suavizando el texto de forma diferente mientras la transición está en movimiento. Los bordes del texto se suavizan y el texto se vuelve más fino. Esto es más obvio si amplías el violín con herramientas de accesibilidad. En algunos tamaños más pequeños, el sombreado alrededor del botón al lado del texto del formulario cambia también. (¿Es posible que Safari esté redibujando algunas cosas, o reorientándolas en un nivel subpíxel durante las transiciones? Alguien explique esto por favor, ¡me está volviendo loco!)

Porque no tengo una idea real de por qué está haciendo esto tampoco, estas podrían no ser las mejores soluciones:

Dependiendo de lo que esté transformando, reemplazar la transformación css por una animación javascript probablemente la solucione.
Por ejemplo, en su violín, el problema también ocurrió con una transformación de escala, pero no con una función animada jQuery similar.

Parece haber algunos matices y estilos en los que el cambio de suavizado es menos obvio (al menos en el violín), por lo que también podría intentar diseñar los marcadores de posición y otros textos afectados de forma diferente.
(Este hilo puede ayudar con labrar los marcadores de posición, si vas por ese camino: Change an HTML5 input's placeholder color with CSS)

Answer 3

Gracias a la identificación de anti-aliasing anterior, así como la ayuda de los siguientes artículos, he modificado mi código para incluir translate3d(0,0,0) y el problema desapareció:

-webkit-transition-duration: .17s, .17s translate3d(0,0,0); 

la transición no es tan suave como lo era antes, pero eso es un tema para otra pregunta.

Wonky text anti-aliasing when rotating with webkit-transform in Chrome

http://johanbrook.com/design/css/a-fix-for-antialiasing-issues-in-webkit-browsers/

http://www.webkit.org/blog/386/3d-transforms/

Answer 4

tuve el mismo problema, mientras que una transición de texto se convirtió en antialias. esto sucede solo en el texto de anclaje que se coloca con relación e con índice z dentro de un elemento posicionado y con el índice z mismo. si elimino todas las posiciones e indico el problema desaparecerá.

Answer 5

No hay un tema más relevante que he encontrado para un problema que tuve, pero eso está relacionado con el problema mencionado anteriormente. Por lo tanto, podría ser útil para alguien.

En dos palabras: Tengo un contenedor (ventana emergente), un elemento dentro. Aparecerá de la siguiente manera: el fondo del contenedor se está oscureciendo a través de la opacidad y el elemento interno se está expandiendo (como acercarse a nosotros desde atrás). Todo funciona bien en todas partes, pero no en Safari (Mac/Win/iPhone). Safari "inicialmente" muestra mi contenedor, pero parpadea de forma extraña (aparece un pequeño flash corto).

Solo agregando -webkit-transform: translateZ (0); (al contenedor !!!) ayudó.

.container { 
    -webkit-transform: translateZ(0); /* <-- this */ 
} 

.container section { 
    -webkit-transform: translateZ(0) scale(.92); /* <-- and I added translate here as well */ 
    -webkit-transition: -webkit-transform .4s, opacity .3s; 
    opacity:0; 
} 

.container.active section { 
    -webkit-transform:translateZ(0) scale(1); 
    -webkit-transition: -webkit-transform .3s, opacity .3s; 
    opacity:1; 
} 

---

Pero hablando de las transiciones, también fue la siguiente parte del código:

.container { 
    ... 
    top:-5000px; 
    left:-5000px; 
    -webkit-transition: opacity .5s, top 0s .5s, left 0s 5s, width 0s 5s, height 0s 5s; 
} 
.container.active { 
    -webkit-transition: opacity .5s; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 

teniendo en cuenta, que yo quiero mostrar/ocultar la ventana emergente usando sólo conmutación css (y también para hacerlo desaparecer muy bien en lugar de solo "mostrar: ninguno").

por lo que de alguna manera apareció Safari (obviamente) heredaba propiedades de transición además de "opacidad" incluso cuando las sobrecargué con -webkit-transition: opacity .5s;

así, añadiendo la siguiente resolvió el problema:

.container { 
    ... 
    -webkit-transition: opacity .5s, top 0s 0s, left 0s 0s, width 0s 0s, height 0s 0s; 
} 

Answer 6

Hay un problema similar usando transition y translate3d. En ocasiones, cualquier elemento de la página con estilos :hover muestra su comportamiento de desplazamiento. Tengo este problema usando un control deslizante. Ponga el -webkit-transform: translateZ(0); en el elemento :hover y su comportamiento es normal.

Answer 7

Para rotación() tal vez está bien, pero para escala() No hecho trabajaron la fórmula -webkit-transform: translateZ(0);.

utilicé:

-webkit-font-smoothing: antialiased;