tamaño - Al pasar sobre la transición de CSS en Safari se aclara cierto color de fuente
input css examples (7)
Estaba luchando con un problema similar. Para mí, los enlaces aleatorios a lo largo de la página se volvieron aparentemente audaces (claramente algo que ver con OSX y suavizado en Safari, como Chrome (en Windows 7 y OSX), así como la misma versión de Safari en Windows funcionó bien.
La solución no es obvia y, dependiendo de lo que esté haciendo, puede que no sea la óptima, pero agregar esta línea de código solucionó el problema:
-webkit-transform: translateZ(0);
Básicamente, esto activa la GPU para hacer animación, y el texto ya no tenía artefactos en mi sitio. Tenga en cuenta que no siempre es apropiado usarlo, ya que puede usar más vida de la batería y más recursos. A veces, sin embargo, usa menos, así que básicamente compruebe el rendimiento cuando lo agregue.
Usted agrega esto al estado normal, no al estado animado: hover.
img { -webkit-transform: translateZ(0); }
A diferencia de en:
img:hover { /* not here */ }
El otro efecto secundario muy positivo es que, dependiendo de la animación que esté haciendo, podría ser más suave a través de la GPU. Así que 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 un cuadro de sombra que aparece al mismo tiempo. En mi situación, no redujo el uso de la CPU por desgracia.
En mi CSS definí una transición para una clase. Por alguna razón, cuando paso por encima de la clase con la transición, la transition-duration la transition-duration por alguna razón altera el color de la fuente en otra parte (marcadores de posición de formulario y ciertos enlaces). (Esto solo ocurre en Safari por lo que puedo decir).
Aquí hay un jsFiddle que muestra de lo que estoy hablando:
¿Alguien sabe por qué ocurre esto y cómo puedo prevenirlo?
Gracias a la identificación del suavizado anterior, así como a la ayuda de los artículos a continuación, modifiqué 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 fue antes, pero ese es un tema para otra pregunta.
Anti-alias de texto no deseado al rotar con webkit-transform en Chrome
http://johanbrook.com/design/css/a-fix-for-antialiasing-issues-in-webkit-browsers/
Hay un problema similar con la transition y translate3d . A veces, cualquier elemento de la página con :hover styles muestra su comportamiento de desplazamiento. Tengo este problema utilizando un control deslizante. Ponga la -webkit-transform: translateZ(0); Al elemento :hover y su comportamiento es normal.
No puedo comenzar a decirte por qué está haciendo esto, pero Safari no está cambiando el color de tu texto, está suavizando el texto de manera diferente mientras la transición está en movimiento. Los bordes del texto se suavizan y el texto en sí se vuelve más delgado. Esto es muy obvio si te acercas al 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 también cambia. (¿Es posible que Safari esté redibujando algunas cosas, o reorientándolas en un nivel de sub-píxeles durante las transiciones? Alguien explique esto por favor, ¡me está volviendo loco ahora!)
Como tampoco tengo una idea real de por qué está haciendo esto, estas podrían no ser las mejores soluciones:
Dependiendo de lo que estés transformando, la sustitución de la transformación css con una animación javascript probablemente lo solucione.
Por ejemplo, en su violín, el problema también ocurrió con una transformación de escala, pero no con una función de animación jQuery similar.
Parece que hay 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 puede intentar estilizar los marcadores de posición y otros textos afectados de manera diferente.
(Este hilo puede ayudar a diseñar los marcadores de posición, si sigue esa ruta: cambie el color del marcador de posición de una entrada HTML5 con CSS )
Para la rotación () tal vez esté bien, pero para la escala () No funcionó la -webkit-transform: translateZ(0); fórmula.
Solía :
-webkit-font-smoothing: antialiased;
Tuve el mismo problema, mientras que en una transición, un texto se suavizó. esto sucede solo en el texto de anclaje que se coloca relativo e con el índice z dentro de un elemento posicionado y con el índice z en sí. Si elimino todas las posiciones e indexo el problema desaparecerá.
No he encontrado un tema más relevante para un problema que tuve, pero está relacionado con el problema mencionado anteriormente. Por lo tanto, podría ser útil para alguien.
En dos palabras: tengo algún contenedor (popup), algún elemento dentro. Aparece de la siguiente manera: el fondo del contenedor se está oscureciendo a través de la opacidad y el elemento interior se está incrementando (como si nos acercáramos por detrás). Todo funciona bien en todas partes, pero no en Safari (Mac / Win / iPhone). Safari "inicialmente" muestra mi contenedor, pero parpadea de alguna manera extraña (aparece un pequeño destello corto).
Sólo agregando -webkit-transform: translateZ (0); (al contenedor !!!) ayudo.
.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 estaba 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%;
}
considerando, que quiero mostrar / ocultar la ventana emergente usando solo el cambio de css (y también para que desaparezca bien en lugar de "mostrar: ninguno")
así, de alguna manera, al aparecer Safari (obviamente) estaba heredando propiedades de transición además de "opacidad", incluso cuando las he sobrecargado con solo -webkit-transition: opacidad .5s;
Entonces, agregando lo siguiente resolvió el problema:
.container {
...
-webkit-transition: opacity .5s, top 0s 0s, left 0s 0s, width 0s 0s, height 0s 0s;
}