Freaking Firefox. J'ai été aussi pénible dans ce projet que IE. Utilisez-vous la version 3.0.1? Il existe de nouvelles classes de spin spécifiques à Mozilla pour résoudre ce problème. Si cela se produit toujours, faites-le moi savoir et je rouvrirai.

Je peux confirmer que j'utilise la version 3.0.1, j'ai même re-téléchargé et vérifié et le problème persiste.

Dans mon commentaire précédent, il semble que mes exemples aient été supprimés, je serais heureux de vous envoyer le modèle mako où ce problème se produit?

J'ai un tremblement / oscillation lors de l'utilisation de .icon-spin sur Chromium (24.0.1312.56) et Chrome sur Linux, Firefox (18.0.2) semble bien. Testé sur 13d5dd373cbf3f2bddd8ac2ee8df3a1966a62d09

Je reçois un tremblement / oscillation sur Firefox 18.0.2 mais pas dans Chrome ou IE dans certaines circonstances. Je n'ai cependant pas été en mesure d'identifier la cause exacte. (en utilisant font-awesome v3.0.2)

Je suis en train de vaciller sur tous les navigateurs sous Windows 7, mais c'est une chose de beauté sous OSX.

@davegandy ping

J'obtiens un vacillement sur la version 26.0.1410.65 de Chrome (version assez récente). Des travaux à ce sujet?

ping! J'ai aussi le problème. Je ne vois pas pourquoi le problème a été fermé, car il persiste toujours.

pouvez-vous s'il vous plaît fournir un violon expliquant le problème?

Même problème ici, des solutions?

Confirmé pour la dernière version de Chrome (28.0.1500.71). Plus l'icône est petite, plus le mouvement est exagéré. Ce problème affecte la classe icon-spin partout où elle est appelée.

J'ai essayé la rotation 3D sans succès. La rotation du icon-circle lui-même est un problème.

Sous Windows 7, j'ai le problème dans Firefox 22.0, Chrome 28.0.1500.72. IE 8-10 l'oscillation est à peine visible, mais en regardant de près le cas où j'ai observé le problème, je pense qu'il y a encore une légère oscillation. Je ferai de mon mieux pour mettre en place un violon pour le problème, mais il y a suffisamment de contexte pour que cela puisse prendre un certain temps.

Pas mon jsfiddle, mais en voici un avec le problème: http://jsfiddle.net/Rnt9N/2/
A l'air bien sur Mac mais nerveux sur Firefox sous Windows 7.

ce n'est pas si mal pour moi (firefox 22 / w7 x64).

J'ai le même problème avec node-webkit v0.7.5.
J'ai fini par utiliser spin.js

rouvrir celui-ci car c'est aussi la faute de FontAwesome

Faire .fa-spin { -webkit-filter: blur(0); } comme ce tweet suggère de le corriger pour moi.

@paldepind merci d'avoir partagé cette solution

Pouvez-vous s'il vous plaît fournir un violon montrant la rotation actuelle et la rotation proposée côte à côte?

Vous pouvez bifurquer ce violon: http://jsfiddle.net/tagliala/HgYqA/

Je ne vois pas de différences dans l'oscillation avec Chrome sur Windows 7. Je remarque juste que l'icône tourne "plus lentement", comme à la vitesse de demi-ips

@tagliala vous êtes les bienvenus!

Voici un violon montrant deux fileurs, un avec et un sans le correctif: http://jsfiddle.net/paldepind/XLdQX/

J'ai testé avec Chrome 30 et Firefox 24 sous Linux. Dans Firefox, tout est fluide, mais dans Chrome, le spinner sans le correctif est légèrement bancal. Je ne vois cependant aucune différence de vitesse de rotation dans aucun des navigateurs.

Chrome 32 sur Windows 7 n'affiche pas du tout l'icône ...

Dans GNU / Linux, avec Chromium 30, le correctif fonctionne. Pas de même pour Firefox 26, car la propriété de filtre n'est pas encore prise en charge. https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Pour Firefox 26 sur Windows 8, les deux sont encore bancaux pour moi. Dans Chrome 31 sur Windows 8, les deux semblent bien.
Le 12 décembre 2013, à 14:20, Felipe Peñailillo [email protected] a écrit:

Dans GNU / Linux, avec Chromium 30, le correctif fonctionne. Pas de même pour Firefox 26, car la propriété de filtre n'est pas encore prise en charge. https://developer.mozilla.org/en-US/docs/Web/CSS/filter

-
Répondez directement à cet e-mail ou affichez-le sur GitHub.

Malheureusement, il ne s'affiche pas sur Windows et est nul sous OSX :(

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

L'icône en rotation n'est pas anticrénelée et continue de vaciller

J'espérais que c'était une solution de contournement viable mais ce n'est pas

@tagliala C'est malheureux. J'avais seulement essayé le correctif sur ma machine avec Linux avec d'excellents résultats.

@paldepind oh je sais que je me souviens que sur ma machine ubuntu, le truc qui tourne est vraiment nul

Pouvez-vous s'il vous plaît essayer les transformations de sous-pixels: http://jsfiddle.net/tagliala/96ULe/3/

Salut! J'ai mis à jour vers Chrome 31 aujourd'hui et maintenant l'oscillation a disparu. Alors peut-être que ce problème disparaîtra tout seul.

@tagliala ne sait pas ce que je suis censé voir. Tout cela ressemble à ce que je devrais penser. Mais encore une fois, c'est dans Chrome 31 où je ne vois plus le problème de l'oscillation.

@tagliala Le violon des transformations de sous-pixels montre toujours de l'oscillation sur Chrome 31 et Firefox 26 dans Kubuntu.

Cependant, je conviens que cela est causé par le rendu des sous-pixels.

Voici un nouveau violon qui montre une lettre de rotation O ("oh") avec une bordure circulaire rouge autour d'elle.

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

Cet exemple exacerbe vraiment l'effet de vacillement, car la bordure rouge pivote doucement, mais le O oscille.

-webkit-filter: blur(0); résout le problème pour moi. Je ne trouve aucune autre directive qui corrige ce problème, y compris --webkit-font-smoothing.

J'ai également essayé de désactiver l'anti-aliasing des polices de KDE (Paramètres système -> Apparence de l'application -> Polices -> Utiliser l'anti-aliasing = Désactivé), et _ cela corrige également le problème_.

malheureusement -webkit-filter: blur(0); n'est pas une solution car il casse les fenêtres

@tagliala ne sait pas dans quelle version de Windows il ne fonctionne pas pour vous. J'ai testé la solution proposée dans les derniers Chrome et IE 11. Elle ne semble pas fonctionner avec Firefox.

@silentworks ça casse Win7 x64 - Chrome 32

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

De plus, quand ça marche, c'est vraiment mauvais anti-crénelé.

Je pense que le principal problème est que les icônes à l'intérieur des polices ne sont pas parfaitement centrées: http://jsfiddle.net/XLdQX/5/

Comme vous pouvez le voir dans la capture d'écran ci-dessous, il y a 3 pixels vides en dessous et 2 au-dessus: cela provoquera l'oscillation.

Si vous pouvez définir la largeur de manière à ce que l'icône soit centrée, l'icône ne vacillera pas: http://jsfiddle.net/XLdQX/6/

À mon humble avis, cette fonction de rotation devrait être supprimée, elle cause plus de problèmes que d'avantages

WONTFIX car beaucoup de travail: -1:
mais oui, c'était chouette ... mais pas nécessaire. Refaire toutes les polices pour faire tourner certaines icônes est beaucoup de travail et va à contre-courant.

@conrado il n'y a pas d'étiquette "wontfix" ici

c'est toujours un wontfix. peut-être que certains des griffes appropriés pour le spin pourraient être retravaillés

c'est toujours un wontfix.

Non, ça ne l'est pas. Il est correctement ouvert et étiqueté comme bug

Je ne suis pas vraiment sûr de l'état de ce problème, même après avoir lu les commentaires, mais comme il est toujours marqué comme ouvert: Chromium 31 et Firefox Aurora 28 (2014-1-13) sur Xubuntu ont toujours des tremblements.

@ ahamilton9 jetez un oeil ici: https://github.com/FortAwesome/Font-Awesome/issues/2709#issuecomment -32045585

Ok, je pense que c'est un bug du navigateur dans chaque police.
Il y a trois exemples: http://jsfiddle.net/3T8Kz/

Premièrement: police Font-Awesome centrée, avec le bogue.
Deuxièmement: un autre exemple mais avec une police normale
Troisièmement: sans polices, juste un div, avec la même animation et sans le bogue.

Le même bug pour moi Firefox 31, Linux.
Si cela est dû à la taille des glyphes, il suffit de ne corriger que les glyphes destinés à tourner, pas tous.

: +1: +1 ceci devrait être pris en compte pour la prochaine version majeure, où vraisemblablement tous les glyphes seront revisités.

Voir ce problème même sur le site officiel: http://i.gyazo.com/3ba2d0afad90c2e7fe6d2c0bb34e661d.mp4

(Dernière version de Firefox)

J'adorerais voir cela corrigé: +1:

les demandes d'extraction et les enquêtes approfondies à ce sujet sont les bienvenues

cela semble être un bug de chrome

@davegandy une mise à jour?

@thejhnz

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

Idem sur Chrome 37.0.2062.124 sur Mac OS X, Safari sur iOS 7.0.4

+1

J'ai pu traiter (je ne dirai pas résoudre) ce problème de fa-refresh dans un projet local en utilisant
-origine-transformée-web: 49% 48,5%;
-moz-transform-origine: 49% 48,5%;
-ms-transform-origin: 49% 48,5%;
-o-origine-transformée: 49% 48,5%;
origine de la transformation: 49% 48,5%;

J'utilise "fa-circle-o-notch" comme symbole de chargement et j'utilise ces valeurs pour transformer l'origine afin qu'elle ne vacille pas

.fa-circle-o-notch.fa-spin {
-origine-transformée-webkit: 50% 48,9%;
-moz-transform-origine: 50% 48,9%;
-ms-transform-origin: 50% 48,9%;
-o-origine-transformée: 50% 48,9%;
origine de la transformation: 50% 48,9%;
}

@magnyld Je viens d'essayer cela, mais continue de vaciller après les changements du DOM.

Vous ne pouvez pas compter sur la transformation des origines. Cela pourrait casser si l'icône est plus grande ou plus petite. Comme je l'ai déjà dit, ce n'est pas un problème de police génial, car si vous essayez de faire tourner un div de style cercle parfait, le résultat est le même. Je parie que c'est un bug du moteur Webkit.

Non, cela est également présent dans Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=930079

Osciller dans Firefox 33, OSX.

Même problème ici ( rotation oscillante ) :(

les demandes d'extraction avec une analyse approfondie de ce problème, une solution de contournement et une explication appropriée des avantages et des inconvénients seront les bienvenues.

Le problème semble provenir de l'icône elle-même. Si vous prenez la version spinner Icomoon, elle ne vacille pas du tout. Cela fonctionne bien sur Chrome 39, Windows et IE11, Windows. Je ne sais pas pour les autres navigateurs.

http://jsfiddle.net/cxxzh0uf/

@skoub

L'approche d'icomoon consistant à conserver des icônes toutes de la même taille semble meilleure à cet effet, mais ce n'est pas suffisant.

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

Si j'inspecte le pseudo-élément :before , je remarque que fontawesome est "bizarre"

J'ai essayé de définir la même largeur et la même hauteur mais les choses ne s'améliorent pas.

Je pense que cela est lié à la police elle-même et que nous ne pouvons rien faire via CSS.

Dave devrait jeter un œil à la police et inspecter les polices générées par Icomoon pour essayer de comprendre quelle est la meilleure façon de résoudre ce problème.

Nous ne pouvons pas accepter les demandes d'extraction avec des modifications du fichier .otf, mais nous apprécierons de l'aide à ce sujet. Si quelqu'un ici est capable de jeter un œil à la police et d'identifier le problème, c'est le bienvenu

Désolé pour mon anglais, il est aussi tard ici :)

@tagliala merci d'avoir
J'ai remarqué que fa-cog a le même problème, mais il n'est pas aussi perceptible dans les mêmes circonstances que fa-clock ou certains des autres mentionnés ci-dessus. Je continuerai à regarder ce fil et je signalerai si je trouve des solutions de contournement, mais je suis assez convaincu que ce sont les petites imperfections des glyphes eux-mêmes qui n'apparaissent qu'une fois en rotation, sinon elles sont trop petites pour être remarquées à l'œil nu

J'ai rencontré le même problème, existe-t-il une solution confirmée pour cela?

@TsuiJie non, il n'y en a pas

J'ai eu un problème similaire avec les icônes de rotation tremblante / oscillante dans IE10 et 11.

Mon problème était que dans IE 10/11 les barres de défilement montraient et se cachaient (palpitant) tant que la flèche était visible.

ce que j'ai trouvé, c'est qu'en définissant la hauteur et la largeur de la balise d'icône à une taille définie (même taille que l'icône elle-même), le battement s'est arrêté.

J'espère que ça aide quelqu'un.
À votre santé

D'accord, j'ai compris que le problème était lié à la conversion de Font Squirrel en formats de polices Web. On dirait que cela bouleverse certaines des métriques. Mon plan:

• test avec une nouvelle version de Font Squirrel
• si cela ne fonctionne pas, lancez ma propre solution de conversion

D'accord, après une quantité considérable d'investigations, j'ai mis quelques correctifs:

• Mise à jour de fa-spinner pour avoir un meilleur effet visuel lors de la rotation.
• Une conversion de polices Web a été lancée à domicile. Font Squirrel était définitivement en train de gâcher les choses.
• Ajustement de certaines métriques de police qui n'ont apparemment aucun effet sur mac, mais qui sont fortement utilisées par Windows.
• Ajout d'exemples animés à la page de test visuel (http://fontawesome.io/test/).

Les resultats

• Retina Mac: parfait dans Chrome, Safari et Firefox
• Mac sans rétine: bien meilleur dans Chrome, Safari et Firefox
• Windows 7: IE11 a l'air impeccable, Chrome 39 a toujours des problèmes, mais je ne pense pas que ce soit pire qu'il ne l'était

Une mise en garde

• À quelques tailles de police, il y a un peu d'oscillation dans tous les navigateurs (Icomoon a le même problème). Fondamentalement, si vous le maintenez à des multiples et demi-multiples de la résolution optimisée (par exemple 14px, 21px, 28px, 35px), l'oscillation disparaît.

Étant donné que les résultats sont bien meilleurs qu'ils ne l'étaient, je vais appeler cela acceptable pour 4.3 et garder le problème ouvert pour 5.0.

Encore une mise à jour. J'ai compris quelle option sélectionnée ne fonctionnait pas bien pour la conversion Font Squirrel. Alors j'ai remis ces fichiers. Laissant ouverts.

@davegandy , je ne vois aucune amélioration de mon côté avec Firefox et Chrome sur Windows. Je n'ai pas essayé IE11. Vous pouvez clairement voir l'oscillation si vous utilisez des étapes dans l'animation.

Je comprends que vous ne pouvez pas faire grand-chose sur la branche 4.x mais existe-t-il une solution solide pour la branche 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);
}

Pour tous ceux qui sont arrivés jusque-là et qui recherchent un dépannage:

N'utilisez pas fa-spin et fa-fw ensemble.

Cela s'est avéré être mon problème (et ma solution).

@skoub

IE11 est presque parfait, à mon humble avis le meilleur de Windows.

L'icône du spinner est nouvelle et devrait être meilleure qu'avant.

Jetez un œil au bas de cette page lourde avec tous les navigateurs: http://fontawesome.io/test/

Chrome et Firefox sont vraiment mauvais dans les petites tailles: déçu:

avec IE11, avec fa-pulse, il y a un petit problème. C'est comme si le spinner se déplaçait de 1px vers le haut et descendait à l'étape d'animation suivante.

Cela fonctionne pour moi sur IE 11 et Chrome 40.0.2214.115 m mais il vacille dans Firefox 35.0.1.

Toujours perceptible dans Firefox 36 pour Linux.

La vidéo est enregistrée à 50 FPS.

L'ajout d'un scaleZ(1.001) résout le problème de Firefox 36 sous Linux.

Je ne sais pas si mon problème était le même que celui de tout le monde, il semblait être plus comme le problème # 4017, mais cela a été fermé et redirigé ici, alors je vais simplement poster ma solution ici.

Semble si vous ajoutez simplement ce qui suit à la classe .fa-spin.

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

Semblait réparer le vacillement pour moi.

Ni éviter @qJake fa-fixed ni align: center @JakeCooper le corrige pour moi:

(Sans fa-spin, il n'y a pas de gigue).

@isaksky pourriez-vous s'il vous plaît fournir un violon montrant ce problème? j'ai une idée

@tagliala Ici vous allez:

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

Chrome 40.0.2214.115, Windows 7. Impossible de reproduire ce problème sur le codepen fourni.

Quel navigateur vous donne cette sortie?

Je ne suis pas sur mon ordinateur de travail pour le moment, mais je pense que c'est le dernier Chrome normal sur Windows 8. Je ne peux normalement pas le reproduire ici sur ce mac dans Chrome, mais si je zoome à 110% ou 125% pour exemple, il apparaît. (Il y a aussi un problème où mes boutons s'empilent verticalement, mais ce n'est pas le problème que je veux dire (je pense que je peux résoudre ça en utilisant ems).). La gigue se produit-elle pour vous si vous dérangez le zoom?

Je viens de le faire arriver au zoom normal (100%) sur ce mac aussi. Cela semble lié au problème de zoom et / ou au changement d'onglet du navigateur. Btw, le problème se produit également avec $('#spin-pls').toggleClass("fa-spin") , (au lieu de basculer 'cacher' dessus quand déjà en rotation), ce qui pourrait clarifier un peu plus le problème.

Je vérifierai demain avec mon mac

J'ai une solution de contournement ici pour faire tourner le rouage. Agréable et fluide lorsque vous survolez.

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

J'ai fait une animation d'image clé qui ne tourne que 30 degrés ( rotateFa ci-dessous). Alors j'appelle ça comme ça animation: rotateFa .1s infinite;

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

Et le contraire pour l'inverser

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

Le problème existe toujours.

Il existe toujours dans le cas du mode de désactivation de l'accélération matérielle. Firefox 36.0.4.

Veuillez ne pas attribuer +1 ou confirmer que ce problème existe toujours, car le problème est ouvert et nous ne savons pas comment le résoudre.

Jetez un œil ici: https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -65381998

Ce serait peut-être une bonne idée de mettre un avertissement sur la page des exemples ? Le problème est suffisamment important pour que je me méfie beaucoup des icônes animées, mais selon https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -71056820, vous ne le remarqueriez pas sur un Mac Retina - même si vous avez testé sur tous les principaux navigateurs.

@Vusys Je suis d'accord. Vous pouvez envoyer un PR contre la branche principale ou me dire quoi écrire et je le ferai

@tagliala fait avec la requête d'extraction # 6686 qui ajoute l'avertissement suivant sous les exemples:

Certains navigateurs sur certaines plates-formes ont des problèmes avec les icônes animées entraînant un effet de vacillement instable. Consultez le numéro 671 pour des exemples et des solutions de contournement possibles.

@Vusys merci!

Je vois une oscillation bien pire que juste +/- 1 pixel. Il y a une interaction étrange entre la transformation de rotation et d'autres transformations CSS, de sorte que parfois le centre de rotation est en dehors de l'icône de rotation.

Je n'ai pas encore déterminé quelle règle CSS est à l'origine de ce problème sur mon site, mais cela ressemble à un cas d'ordre de transformation erroné. L'ordre doit être: translater le centre de l'icône en (0,0), puis faire pivoter selon l'angle actuel, puis traduire (0,0) à la position de l'écran à laquelle l'icône centrale doit être affichée (ou inversement). Quelque part, CSS jette une autre traduction dans le mix.

_Mise à jour: _ J'ai compris quel était le problème dans mon cas, donc je posterai la réponse ici au cas où quelqu'un d'autre pourrait en profiter: j'avais une règle CSS qui changeait la largeur de l'élément 'i' que le spinner a été stocké dans (l'élément Bootstrap utilisé pour les icônes FA). Cela donne des résultats imprévisibles en fonction du contexte de l'icône (par exemple selon que le texte a été centré ou non).

Je n'ai pas défini quelle règle CSS

Je suis assez convaincu que ce n'est pas une règle css et que le problème n'est pas lié à FA lui-même

Jetez un œil ici: http://jsfiddle.net/tagliala/g0ngLhyr/

@tagliala , si ce n'est pas lié à une règle css ou FA, comment expliquez-vous qu'Icomoon n'a pas l'effet d'oscillation?

démo: http://jsfiddle.net/cxxzh0uf/

un autre exemple est celui fait par google: http://www.getmdl.io/components/index.html#loading -section / spinner

@skoub votre violon mis à jour vers 4.3.0: http://jsfiddle.net/tagliala/cxxzh0uf/9/

Jetez un œil ici: http://jsfiddle.net/tagliala/g0ngLhyr/

Notez que ce violon n'a pas du tout de polices Web et montre toujours l'oscillation

La mise en œuvre de @skoub google n'est pas basée sur les polices Web et à mon humble avis, c'est la bonne façon de gérer cette fonctionnalité.

J'aimerais partager mon expérience ici.

Icônes uniques:
Je n'ai qu'un problème avec l'oscillation avec des icônes empilées. Les icônes simples tournent ou pulsent très bien

Icônes empilées:
Apparemment, sur mon site, le code ci-dessous ne vacille pas dans un titre où la police est un peu plus grande, mais vacille lorsque la police est plus petite. L'impulsion fa oscille dans les deux cas

avertissement: Je suis très nouveau dans toutes ces choses, mais comme mon site produit des résultats à la fois bancaux et bons, j'ai pensé que vous voudriez tous savoir.

@isaksky Ce wobble / blur with spinner a à voir avec l'accélération matérielle

Les éléments affichés / masqués avec la classe .hide peuvent voir le navigateur indiquer que ce contenu sera masqué

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

Cependant, les navigateurs basés sur Gecko, comme Firefox, ont encore, du moins pour moi, des problèmes de saut de texte dans la boîte de dialogue.

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

fonctionne, mais affecte négativement Chrome en surcompensant et en rendant le texte flou tout le temps. J'ai proposé deux solutions possibles, la première cible uniquement Firefox, la seconde est une accélération différente, filter: blur(0); noté dans ce bogue mais est un peu hacky à mon avis - similaire à transform: translateZ(0); - -et pourrait conduire à des résultats négatifs à l'avenir.

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

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

Cela résout le problème, merci @toastal ! Cela pourrait-il être transformé en une solution générale @tagliala ?

@toastal cela vous dérange-

J'essaie tous les exemples que vous avez publiés, et je ne peux pas les reproduire dans Firefox Aurora:

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

Je suis sur debian Jessie, et à cause de quelques problèmes de pilote nvidia, je pense que je n'ai pas d'accélération matérielle.

Échec du processus GLXtest (terminé avec l'état 1): extension GLX manquante
Procesador WebGL Bloqueado pour la tarjeta gráfica debido a problemas no resueltos del controlador.

Aussi, ne peut pas reproduire ici:
http://shb.github.io/bootstrap-loading-screen/#icon : spinner

est-ce résolu ou parce que je n'ai pas activé l'accélération matérielle?

J'ai trouvé un autre correctif potentiel pour ce problème (exécutant Firefox 39) grâce à cet article: http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css -se transforme/

J'ai édité le JSFiddle ci-dessus avec le correctif: http://jsfiddle.net/5z9om45L/

il suffit de mettre "perspective (1px)" dans la propriété transform. Cela "jette le rendu de l'objet sur le GPU", selon le post lié ci-dessus. Je n'ai pas personnellement testé cela de manière approfondie, donc je ne sais pas ce que cela fait spécifiquement ou si cela provoque d'autres problèmes, mais jusqu'à présent, cela semble bien. Cela a été l'un de mes plus gros problèmes avec Firefox, alors j'ai pensé le mentionner ici.

J'ai édité le JSFiddle ci-dessus avec le correctif: http://jsfiddle.net/5z9om45L/

Cela résout le problème très bien pour moi.

Voici un violon mis à jour qui montre l'oscillation sur la boussole. Le deuxième bouton de localisation montre un simple fa-spin avec une oscillation prononcée.

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

@spiderr apparemment, fa-lg augmente l'effet d'oscillation car il traite de la hauteur de la ligne et de la taille de la police. Essayez d'utiliser une taille de police de 14 px ou des multiples

@tagliala merci, bon conseil! fa-2x définitivement mieux. Il y a aussi des artefacts étranges (pixels sales) autour du cercle. Voici un violon au fa-5X qui les montre plus clairement sur le gros bouton bleu. C'est un détail minutieux, mais si quelqu'un nettoie jamais la boussole, ce serait génial. J'espère que lorsque la boussole tourne, vous ne pouviez pas dire que le cercle bougeait, seulement l'aiguille de la boussole intérieure. Si je m'assois à 2 mètres de l'écran avec fa-5x, ça a l'air génial :-)

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

Je ne sais pas si c'est le bon fil, mais ..
Dans Firefox, mon "fa fa-cog fa-spin" s'arrête de tourner. Je l'utilise dans un appel ajax avec un modal. Cela fonctionne bien dans Safari et Chrome, mais Firefox s'arrête pour une raison quelconque. Des pensées??

app / javascripts / mon_fichier.js
$ (document) .ready (fonction () {
$ ('# search_btn'). on ('click', function () {
$ ('# résultats'). empty ();
var myForm = $ ('# recherche_utilisateur');
$ ("# spinner_modal"). modal ("afficher");
$ .ajax ({
url: myForm.attr ('action'),
tapez: "POST",
données: myForm.serialize (),
dataType: 'texte',
succès: function (html) {
$ ("# spinner_modal"). modal ("cacher");
$ ('# résultats'). append (html);
},
erreur: fonction (xhr, satus, err) {
$ ("# spinner_modal"). modal ("cacher");
},
délai d'expiration: 60000
});
retourner faux;
});

_my_partial.html.erb

jonathanparrish le 11 août 2015