Maldito Firefox. Ha sido tan doloroso en este proyecto como IE. ¿Estás usando 3.0.1? Hay nuevas clases de giro específicas de Mozilla para ayudar con este problema. Si todavía está sucediendo, avíseme y volveré a abrir.

Puedo confirmar que estoy usando 3.0.1, incluso volví a descargar y verifiqué dos veces y el problema persiste.

En mi comentario anterior, parece que mis ejemplos fueron eliminados, me complacería enviarle la plantilla mako donde ocurre este problema.

Tengo una sacudida / tambaleo cuando uso .icon-spin en Chromium (24.0.1312.56) y Chrome en Linux, Firefox (18.0.2) parece estar bien. Probado en 13d5dd373cbf3f2bddd8ac2ee8df3a1966a62d09

Tengo un temblor / bamboleo en Firefox 18.0.2 pero no en Chrome o IE en determinadas circunstancias. Sin embargo, no he podido determinar la causa exacta. (usando font-awesome v3.0.2)

Me bamboleo en todos los navegadores en Windows 7, pero es algo hermoso en OSX.

@davegandy ping

Tengo un bamboleo en la versión 26.0.1410.65 de Chrome (versión bastante reciente). ¿Algún trabajo en esto?

¡silbido! También tengo el problema. No veo por qué se cerró el problema, ya que aún persiste.

¿Puede proporcionar un violín que explique el problema?

El mismo problema aquí, ¿alguna solución?

Confirmado para la última versión de Chrome (28.0.1500.71). Cuanto más pequeño es el icono, más exagerado es el movimiento. Este problema afecta a la clase icon-spin en cualquier lugar donde se invoca.

Probé la rotación 3D sin éxito. Rotar el icon-circle sí mismo es un problema.

En Windows 7, tengo el problema en Firefox 22.0, Chrome 28.0.1500.72. IE 8-10, el bamboleo es apenas visible, pero al mirar de cerca el caso en el que he estado observando el problema, creo que todavía hay un ligero bamboleo. Haré todo lo posible para configurar un violín para el problema, pero hay suficiente contexto que puede llevar algún tiempo.

No es mi jsfiddle, pero aquí hay uno con el problema: http://jsfiddle.net/Rnt9N/2/
Se ve muy bien en Mac pero nervioso en Firefox bajo Windows 7.

no es tan malo para mí (firefox 22 / w7 x64).

Tengo el mismo problema al usar node-webkit v0.7.5.
Terminé usando spin.js

reabriendo este ya que también es culpa de FontAwesome

Hacer .fa-spin { -webkit-filter: blur(0); } como este tweet sugiere arreglarlo para mí.

@paldepind gracias por compartir esta solución

¿Puede proporcionar un violín que muestre el giro actual y el giro propuesto uno al lado del otro?

Puedes bifurcar este violín: http://jsfiddle.net/tagliala/HgYqA/

No veo diferencias en el bamboleo con Chrome en Windows 7. Solo noto que el ícono gira "más lento", como a la mitad de fps

@tagliala de nada !

Aquí hay un violín que muestra dos hilanderos, uno con y otro sin la solución: http://jsfiddle.net/paldepind/XLdQX/

Probé con Chrome 30 y Firefox 24 en Linux. En Firefox todo es fluido, pero en Chrome, la ruleta sin la solución es ligeramente inestable. Sin embargo, no veo ninguna diferencia en la velocidad de rotación en ninguno de los navegadores.

Chrome 32 en Windows 7 no muestra el icono en absoluto ...

En GNU / Linux, con Chromium 30, la solución está funcionando. No es lo mismo para Firefox 26, porque la propiedad de filtro aún no es compatible. https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Para Firefox 26 en Windows 8, ambos todavía son inestables para mí. En Chrome 31 en Windows 8, ambos se ven bien.
El 12 de diciembre de 2013, a las 14:20 horas, Felipe Peñailillo [email protected] escribió:

En GNU / Linux, con Chromium 30, la solución está funcionando. No es lo mismo para Firefox 26, porque la propiedad de filtro aún no es compatible. https://developer.mozilla.org/en-US/docs/Web/CSS/filter

-
Responda a este correo electrónico directamente o véalo en GitHub.

Desafortunadamente, no se muestra en Windows y apesta en OSX :(

http://jsfiddle.net/tagliala/XLdQX/2/

El icono giratorio no está suavizado y sigue tambaleándose

Esperaba que fuera una solución viable, pero no lo es.

@tagliala Eso es lamentable. Solo probé la solución en mi máquina con Linux con excelentes resultados.

@paldepind oh, sé que recuerdo que en mi máquina ubuntu las cosas giratorias realmente apestan

¿Puede probar las transformaciones de subpíxeles: http://jsfiddle.net/tagliala/96ULe/3/

¡Hola! Actualicé a Chrome 31 hoy y ahora el bamboleo ha desaparecido. Entonces, tal vez este problema desaparezca por sí solo.

@tagliala no estoy seguro de lo que se supone que debo ver. Todo parece que debería pensar. Pero nuevamente, esto es en Chrome 31, donde ya no veo el problema de bamboleo.

@tagliala El violín de transformaciones de subpíxeles todavía muestra tambaleo en Chrome 31 y Firefox 26 en Kubuntu.

Sin embargo, estoy de acuerdo en que esto se debe a la representación de subpíxeles.

Aquí hay un nuevo violín que muestra una letra de rotación O ("oh") con un borde circular rojo alrededor.

http://jsfiddle.net/bBaVN/208/

Este ejemplo realmente exacerba el efecto de oscilación, porque el borde rojo gira suavemente, pero la O se tambalea.

-webkit-filter: blur(0); soluciona el problema. No puedo encontrar ninguna otra directiva que lo solucione, incluido --webkit-font-smoothing.

También intenté deshabilitar el suavizado de fuentes de KDE (Configuración del sistema -> Apariencia de la aplicación -> Fuentes -> Usar suavizado = Deshabilitado), y _ esto también soluciona el problema_.

desafortunadamente -webkit-filter: blur(0); no es una solución porque rompe ventanas

@tagliala no está seguro de qué versión de Windows no está funcionando para usted. Probé la solución propuesta en la última versión de Chrome e IE 11. No parece funcionar con Firefox.

@silentworks rompe Win7 x64 - chrome 32

http://jsfiddle.net/tagliala/XLdQX/2/

Además, cuando funciona, el suavizado es realmente deficiente.

Creo que el principal problema es que los iconos dentro de las fuentes no están perfectamente centrados: http://jsfiddle.net/XLdQX/5/

Como puede ver en la captura de pantalla a continuación, hay 3 píxeles vacíos debajo y 2 arriba: eso provocará el bamboleo.

Si puede establecer el ancho de manera que el icono esté centrado, el icono no se tambaleará: http://jsfiddle.net/XLdQX/6/

En mi humilde opinión, esta función de giro debe eliminarse, causa más problemas que beneficios

WONTFIX porque mucho trabajo: -1:
pero sí, fue ingenioso ... pero no necesario. Rehacer todas las fuentes para que algunos iconos giren es mucho trabajo y va contra la corriente.

@conrado no hay etiqueta "wontfix" aquí

todavía es una costumbre. quizás algunos de los grifos que son apropiados para girar podrían ser reelaborados

todavía es una costumbre.

No, no lo es. Está correctamente abierto y etiquetado como error.

No estoy realmente seguro del estado de este problema, incluso después de leer los comentarios, pero como aún está marcado como abierto: Chromium 31 y Firefox Aurora 28 (2014-1-13) en Xubuntu todavía tienen temblores.

@ ahamilton9 echa un vistazo aquí: https://github.com/FortAwesome/Font-Awesome/issues/2709#issuecomment -32045585

Ok, creo que es un error del navegador en todas las fuentes.
Hay tres ejemplos: http://jsfiddle.net/3T8Kz/

Primero: fuente Font-Awesome centrada, con el error.
Segundo: Otro ejemplo pero con una fuente normal.
Tercero: Sin fuentes, solo un div, con la misma animación y sin el error.

El mismo error para mí Firefox 31, Linux.
Si esto se debe al tamaño de los glifos, basta con arreglar solo los glifos destinados a girar, no todos.

: +1: +1 esto debería tenerse en cuenta para la próxima versión principal, donde presumiblemente se revisarán todos los glifos.

Ver este problema incluso en el sitio web oficial: http://i.gyazo.com/3ba2d0afad90c2e7fe6d2c0bb34e661d.mp4

(Última versión de Firefox)

Me encantaría ver esto arreglado: +1:

Las solicitudes de extracción y las investigaciones profundas sobre este asunto son muy bienvenidas.

esto parece ser un error de Chrome

@davegandy alguna actualización?

@thejhnz

https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -53544936

Lo mismo en Chrome 37.0.2062.124 en Mac OS X, Safari en iOS 7.0.4

+1

Pude tratar (no diré que resuelva) este problema de actualización automática en un proyecto local usando
-webkit-transform-origin: 49% 48,5%;
-origen de la transformada moz: 49% 48,5%;
-más-transformada-origen: 49% 48,5%;
-o-origen de la transformación: 49% 48,5%;
origen de transformación: 49% 48,5%;

Estoy usando "fa-circle-o-notch" como símbolo de carga y uso estos valores para transformar el origen para que no se tambalee

.fa-circle-o-notch.fa-spin {
-webkit-transform-origin: 50% 48,9%;
-origen de la transformada moz: 50% 48,9%;
-más-transformada-origen: 50% 48,9%;
-origen de la transformada: 50% 48,9%;
origen de transformación: 50% 48,9%;
}

@magnyld Acabo de intentarlo, pero sigue tambaleándose después de los cambios de DOM.

No puede confiar en el uso de la transformación de orígenes. Esto podría romperse si el ícono es más grande o más pequeño. Como dije antes, este no es un gran problema de fuente, porque si intentas girar un div con estilo de círculo perfecto, el resultado es el mismo. Apuesto a que esto es un error del motor webkit.

No, esto también está presente en Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=930079

Bamboleo en Firefox 33, OSX.

El mismo problema aquí ( giro tambaleante ) :(

Las solicitudes de extracción con un análisis profundo de este problema, una solución alternativa y una explicación adecuada de las ventajas e inconvenientes serán muy bien recibidas.

El problema parece provenir del icono en sí. Si toma la versión giratoria de Icomoon, no se tambalea en absoluto. Funciona bien en Chrome 39, Windows e IE11, Windows. No lo sé para los otros navegadores.

http://jsfiddle.net/cxxzh0uf/

@skoub

El enfoque de icomoon de mantener todos los íconos del mismo tamaño parece mejor para este propósito, pero no es suficiente.

http://jsfiddle.net/tagliala/cxxzh0uf/2/

Si inspecciono el pseudoelemento :before , me doy cuenta de que fontawesome es "raro"

Traté de establecer el mismo ancho y alto, pero las cosas no mejoran.

Creo que esto está relacionado con la fuente en sí y no hay nada que podamos hacer a través de CSS.

Dave debería echar un vistazo a la fuente e inspeccionar las fuentes generadas por Icomoon para tratar de comprender cuál es la mejor manera de solucionar este problema.

No podemos aceptar solicitudes de extracción con ediciones en el archivo .otf, pero agradeceremos su ayuda en este asunto. Si alguien aquí puede echar un vistazo a la fuente e identificar el problema, será bienvenido

Perdón por mi inglés, también es tarde aquí :)

@tagliala gracias por vincular el problema fa-clock-o aquí también, es el mismo problema que mencionan el resto.
He notado que fa-cog tiene el mismo problema, pero no es tan notorio en las mismas circunstancias que fa-clock o algunos de los otros mencionados anteriormente. Seguiré viendo este hilo e informaré si encuentro alguna solución alternativa, pero estoy bastante convencido de que son las pequeñas imperfecciones en los glifos los que aparecen solo una vez que giran; de lo contrario, son demasiado pequeñas para notarlas a simple vista.

He encontrado el mismo problema, ¿existe una solución confirmada para esto?

@TsuiJie no, no hay

Tuve un problema similar con los íconos de giro tembloroso / tambaleante en IE10 y 11.

Mi problema fue que en IE 10/11 las barras de desplazamiento se mostraban y se ocultaban (pulsando) siempre que la ruleta estuviera visible.

Lo que encontré fue que al establecer la altura y el ancho de la etiqueta del icono en un tamaño establecido (el mismo tamaño que el icono en sí), el pulso se detuvo.

Espero que ayude a alguien.
Salud

De acuerdo, he descubierto que el problema está en la conversión de Font Squirrel a formatos de fuentes web. Parece que está cambiando algunas de las métricas. Mi plan:

• prueba con una nueva versión de Font Squirrel
• si eso no funciona, lanza mi propia solución de conversión

Bien, después de una cantidad considerable de investigación, puse algunas correcciones:

• Fa-spinner actualizado para tener un mejor efecto visual al girar.
• Inicio de una conversión de fuente web. Font Squirrel definitivamente estaba arruinando las cosas.
• Se ajustaron algunas métricas de fuentes que aparentemente no tienen ningún efecto en Mac, pero son muy utilizadas por Windows.
• Se agregaron ejemplos animados a la página de prueba visual (http://fontawesome.io/test/).

Los resultados

• Retina Mac: impecable en Chrome, Safari y Firefox
• Mac sin retina: mucho mejor en Chrome, Safari y Firefox
• Windows 7: IE11 se ve impecable, Chrome 39 todavía tiene problemas, pero no creo que sea peor de lo que era

Una advertencia

• En algunos tamaños de fuente, hay un poco de oscilación en todos los navegadores (Icomoon tiene el mismo problema). Básicamente, si lo mantiene en múltiplos y medios múltiplos de la resolución optimizada (por ejemplo, 14px, 21px, 28px, 35px), el bamboleo desaparece.

Dado que los resultados son mucho mejores de lo que eran, lo llamaré aceptable para 4.3 y dejaré el problema abierto para 5.0.

Una actualización más. Descubrí qué opción seleccionada no funcionaba bien para la conversión de Font Squirrel. Así que volví a guardar esos archivos. Dejándolos abiertos.

@davegandy , no veo ninguna mejora de mi lado con Firefox y Chrome en Windows. No probé IE11. Puede ver claramente el bamboleo si sigue los pasos de la animación.

Entiendo que no puede hacer mucho en la rama 4.x, pero ¿hay alguna solución sólida para la rama 5.x?

.fa-spin2 {
    animation: fa-spin 1s infinite steps(8);
    -webkit-animation: fa-spin 1s infinite steps(8);
    -moz-animation: fa-spin 1s infinite steps(8);
    -o-animation: fa-spin 1s infinite steps(8);
}

Para cualquier otra persona que haya llegado tan lejos y esté buscando una solución de problemas:

No use fa-spin y fa-fw juntos.

Este resultó ser mi problema (y mi solución).

@skoub

IE11 es casi perfecto, en mi humilde opinión el mejor en Windows.

El icono de la ruleta es nuevo y debería estar mejor que antes.

Eche un vistazo al final de esta pesada página con todos los navegadores: http://fontawesome.io/test/

Chrome y firefox son realmente malos en tamaños pequeños: decepcionados:

con IE11, con fa-pulse, hay una pequeña falla. Es como si la ruleta se moviera 1 px hacia arriba y hacia abajo en el siguiente paso de animación.

Me funciona en IE 11 y Chrome 40.0.2214.115 m, pero se tambalea en Firefox 35.0.1.

Todavía se nota en Firefox 36 para Linux.

El video se graba a 50 FPS.

Agregar un scaleZ(1.001) soluciona el problema de Firefox 36 en Linux.

No estoy seguro si mi problema era el mismo que el de todos, parecía ser más como el problema # 4017, pero se cerró y se redirigió aquí, así que solo publicaré mi solución aquí.

Parece que simplemente agrega lo siguiente a la clase .fa-spin.

.fa-spin {
    text-align:center;
}

Pareció arreglar el bamboleo para mí.

Ni evitar fa-fixed @qJake ni align: center @JakeCooper lo corrige por mí:

(Sin fa-spin, no hay jitter).

@isaksky, ¿ podría proporcionar un violín que muestre este problema? tengo una idea

@tagliala Aquí tienes:

http://codepen.io/isaksky/pen/JoBqoM

Chrome 40.0.2214.115, Windows 7. No se puede reproducir ese problema en el codepen proporcionado.

¿Qué navegador te está dando ese resultado?

No estoy en la computadora de mi trabajo en este momento, pero creo que es el último Chrome normal en Windows 8. Normalmente no puedo reproducirlo aquí en esta Mac en Chrome, pero si acerco el zoom al 110% o 125% para ejemplo, aparece. (También hay un problema donde mis botones se apilan verticalmente, pero ese no es el problema al que me refiero (creo que puedo solucionarlo usando ems).). ¿Le ocurre el jitter si se mete con el zoom?

Acabo de hacer que suceda con el zoom normal (100%) en esta Mac también. Parece relacionado con jugar con el zoom y / o cambiar las pestañas del navegador. Por cierto, el problema también ocurre con $('#spin-pls').toggleClass("fa-spin") , (en lugar de alternar 'ocultar' cuando ya está girando), lo que podría aclarar un poco dónde está el problema.

Lo comprobaré mañana con mi mac

Tengo una solución aquí para hacer girar el engranaje. Agradable y suave cuando pasas el mouse.

http://codepen.io/jesseangelo/pen/KwrqdM?editors=010

Hice una animación de fotograma clave que gira solo 30 grados ( rotateFa continuación). Entonces lo llamo así animation: rotateFa .1s infinite;

<strong i="11">@keyframes</strong> rotateFa {
    from { transform: rotate(0deg); }
    to { transform: rotate(30deg); }
}

Y lo contrario para revertirlo

<strong i="15">@keyframes</strong> unRotateFa {
  from { transform: rotate(30deg); }
  to { transform: rotate(0deg); }
}

El problema aún existe.

Todavía existe en el caso del modo deshabilitado de aceleración de hardware. Firefox 36.0.4.

No haga +1 ni confirme que este problema aún existe, porque el problema está abierto y porque no sabemos cómo solucionarlo.

Eche un vistazo aquí: https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -65381998

¿Quizás sería una buena idea poner un aviso en la página de ejemplos ? El problema es lo suficientemente grande como para ser muy cauteloso con los íconos animados, pero según https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -71056820, no lo notarías en una retina mac - incluso si probó en todos los navegadores principales.

@Vusys estoy de acuerdo. Podrías enviar un PR contra la rama maestra o decirme qué escribir y lo haré

@tagliala hecho con la solicitud de extracción # 6686 que agrega la siguiente advertencia debajo de los ejemplos:

Algunos navegadores en algunas plataformas tienen problemas con los íconos animados que resultan en un efecto de oscilación nerviosa. Consulte el número 671 para ver ejemplos y posibles soluciones.

@Vusys gracias!

Veo un bamboleo mucho peor que solo +/- 1 píxel. Existe una interacción extraña entre la transformación de giro y otras transformaciones de CSS, por lo que a veces el centro de rotación está fuera del icono de giro.

Todavía no he determinado qué regla CSS está causando este problema en mi sitio, pero parece un caso de orden de transformación erróneo. El orden debe ser: trasladar el centro del icono a (0,0), luego rotar según el ángulo actual, luego trasladar (0,0) a la posición de la pantalla en la que se mostrará el icono central (o al revés). En algún lugar, CSS está lanzando otra traducción a la mezcla.

_Actualización: _ Descubrí cuál era el problema en mi caso, así que publicaré la respuesta aquí en caso de que alguien más pueda beneficiarse de esto: tenía una regla CSS que estaba cambiando el ancho del elemento 'i' que el spinner se almacenó en (el elemento Bootstrap utilizado para los iconos FA). Al hacerlo, se obtienen resultados impredecibles según el contexto del icono (por ejemplo, según si el texto estaba centrado o no).

No he definido qué regla CSS

Estoy bastante seguro de que no es una regla CSS y el problema no está relacionado con FA en sí

Eche un vistazo aquí: http://jsfiddle.net/tagliala/g0ngLhyr/

@tagliala , si no está relacionado con una regla CSS o FA, ¿cómo explicas que Icomoon no tiene el efecto de oscilación?

demostración: http://jsfiddle.net/cxxzh0uf/

otro ejemplo es el de Google: http://www.getmdl.io/components/index.html#loading -section / spinner

@skoub tu violín actualizado a 4.3.0: http://jsfiddle.net/tagliala/cxxzh0uf/9/

Eche un vistazo aquí: http://jsfiddle.net/tagliala/g0ngLhyr/

Tenga en cuenta que este violín no tiene fuentes web y todavía muestra el bamboleo

La implementación de @skoub google no se basa en fuentes web y en mi humilde opinión, esa es la forma correcta de lidiar con esta función.

Me gustaría compartir mi experiencia aquí.

Iconos individuales:
Solo tengo un problema de oscilación con iconos apilados. Los iconos individuales giran o pulsan bien

Iconos apilados:
Aparentemente, en mi sitio, el código siguiente no se tambalea en un título donde la fuente es un poco más grande, pero se tambalea cuando la fuente es más pequeña. El pulso fa se tambalea en ambos casos

descargo de responsabilidad: soy muy nuevo en todas estas cosas, pero como mi sitio produce buenos y tambaleantes resultados pensé que todos querrían saber

@isaksky Ese bamboleo / desenfoque con el spinner tiene que ver con la aceleración del hardware

Los elementos que se muestran / ocultan con la clase .hide pueden hacer que el navegador sugiera que el contenido se ocultará

#spin-pls {
  will-change: contents;
}

Sin embargo, el navegador basado en Gecko, como Firefox, al menos para mí, todavía tiene problemas para saltar texto en el cuadro de diálogo.

.job-order-dialog {
  will-change: transform;
}

funciona, pero afecta negativamente a Chrome al sobrecompensar y difuminar el texto todo el tiempo. Se me ocurrieron dos posibles soluciones, la primera solo apunta a Firefox, la última es una aceleración diferente, filter: blur(0); notada en este error pero es un poco hacky en mi opinión - similar a transform: translateZ(0); - -y podría dar lugar a resultados negativos en el futuro.

@-moz-document url-prefix() {
  .job-order-dialog {
    will-change: transform;
  }
}

.job-order-dialog {
  filter: blur(0);
}

Eso soluciona el problema, ¡gracias @toastal ! ¿Podría esto convertirse en una solución general @tagliala ?

@toastal, ¿te importaría proporcionar un jsfiddle que muestre tu solución y la compare con un giro impresionante de fontawesome?

Estoy probando todos los ejemplos que ustedes publicaron y no puedo reproducirlos en Firefox Aurora:

20150722004007
Mozilla / 5.0 (X11; Linux x86_64; rv: 41.0) Gecko / 20100101 Firefox / 41.0

Estoy en Debian Jessie y, debido a algunos problemas con los controladores de nvidia, creo que no tengo aceleración de hardware.

El proceso GLXtest falló (salió con el estado 1): falta la extensión GLX
Procesador WebGL Bloqueado para tu tarjeta gráfica debido a problemas no resueltos del controlador.

Además, no se puede reproducir aquí:
http://shb.github.io/bootstrap-loading-screen/#icon : spinner

¿Está resuelto o es porque no tengo habilitada la aceleración de hardware?

He encontrado otra posible solución para este problema (ejecutando firefox 39) gracias a esta publicación: http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css -transformaciones /

He editado JSFiddle anterior con la solución: http://jsfiddle.net/5z9om45L/

simplemente ponga "perspectiva (1px)" en la propiedad de transformación. Esto "arroja la representación del objeto a la GPU", de acuerdo con la publicación vinculada anteriormente. Personalmente no he probado esto de manera exhaustiva, por lo que no sé qué hace específicamente o si causa otros problemas, pero hasta ahora se ve bien. Este ha sido uno de mis mayores problemas con Firefox, así que pensé en mencionarlo aquí.

He editado JSFiddle anterior con la solución: http://jsfiddle.net/5z9om45L/

Soluciona el problema muy bien para mí.

Aquí hay un Fiddle actualizado que muestra el bamboleo de la brújula. El segundo botón de localización muestra un simple fa-spin con un pronunciado bamboleo.

http://jsfiddle.net/Lpur9ek1/1/

@spiderr aparentemente, fa-lg aumenta el efecto de oscilación porque se ocupa de la altura de la línea y el tamaño de la fuente. Intente usar un tamaño de fuente de 14px o múltiplos

@tagliala gracias, gran consejo! fa-2x definitivamente mejor. También hay algunos artefactos extraños (píxeles sucios) alrededor del círculo. Aquí hay un violín en fa-5X que los muestra más claramente en el gran botón azul. Este es un detalle mínimo, pero si alguien alguna vez limpia la brújula, sería genial. Mi esperanza es que cuando la brújula gire, no puedas saber si el círculo se estaba moviendo, solo la aguja interior de la brújula. Si me siento a 2 metros de la pantalla con fa-5x, se ve genial :-)

http://jsfiddle.net/mhqLvw79/1/

No estoy seguro de si este es el hilo correcto, pero ...
En Firefox, mi "fa fa-cog fa-spin" deja de girar. Lo uso en una llamada ajax con un modal. Funciona bien en Safari y Chrome, pero Firefox se detiene por alguna razón. ¿¿Alguna idea??

app / javascripts / my_file.js
$ (documento) .ready (function () {
$ ('# search_btn'). on ('click', function () {
$ ('# resultados'). vacío ();
var myForm = $ ('# user_search');
$ ("# spinner_modal"). modal ("mostrar");
$ .ajax ({
url: myForm.attr ('acción'),
tipo: "POST",
datos: myForm.serialize (),
dataType: 'texto',
éxito: función (html) {
$ ("# spinner_modal"). modal ("ocultar");
$ ('# resultados'). append (html);
},
error: función (xhr, satus, err) {
$ ("# spinner_modal"). modal ("ocultar");
},
tiempo de espera: 60000
});
falso retorno;
});

_my_partial.html.erb

jonathanparrish en 11 ago. 2015