Freaking Firefox. War in diesem Projekt genauso schmerzhaft wie der IE. Verwenden Sie 3.0.1? Es gibt neue Mozilla-spezifische Spin-Klassen, um dieses Problem zu beheben. Wenn es immer noch passiert, lass es mich wissen und ich werde es wieder öffnen.

Ich kann bestätigen, dass ich 3.0.1 verwende. Ich habe es sogar erneut heruntergeladen und überprüft, und das Problem besteht weiterhin.

In meinem vorherigen Kommentar scheinen meine Beispiele entfernt worden zu sein. Ich würde Ihnen gerne die Mako-Vorlage senden, in der dieses Problem auftritt.

Ich habe ein Shake / Wobble bei der Verwendung von .icon-spin unter Chromium (24.0.1312.56) und Chrome unter Linux. Firefox (18.0.2) scheint in Ordnung zu sein. Getestet am 13d5dd373cbf3f2bddd8ac2ee8df3a1966a62d09

Ich bekomme ein Shake / Wobble auf Firefox 18.0.2, aber unter bestimmten Umständen nicht in Chrome oder IE. Ich konnte jedoch die genaue Ursache nicht genau bestimmen. (mit font-awesome v3.0.2)

Ich werde in allen Browsern unter Windows 7 wackeln, aber unter OSX ist es eine schöne Sache.

@ Davegandy Ping

Ich bekomme ein Wackeln auf Chrome Version 26.0.1410.65 (ziemlich aktuelle Version). Irgendwelche Arbeiten dazu?

Klingeln! Ich habe auch das Problem. Sehen Sie nicht, warum das Problem geschlossen wurde, da es weiterhin besteht.

Können Sie bitte eine Geige zur Erklärung des Problems bereitstellen?

Gleiches Problem hier, irgendwelche Lösungen?

Bestätigt für die neueste Version von Chrome (28.0.1500.71). Je kleiner das Symbol, desto übertriebener ist die Bewegung. Dieses Problem betrifft die Icon-Spin-Klasse überall dort, wo sie aufgerufen wird.

Ich habe die 3D-Rotation ohne Erfolg versucht. Das Drehen von icon-circle selbst ist ein Problem.

Unter Windows 7 tritt das Problem in Firefox 22.0, Chrome 28.0.1500.72 auf. IE 8-10 das Wackeln ist kaum sichtbar, aber wenn ich mir den Fall genau ansehe, in dem ich das Problem beobachtet habe, denke ich, dass es immer noch ein leichtes Wackeln gibt. Ich werde mein Bestes tun, um eine Geige für das Problem einzurichten, aber es gibt genug Kontext, dass es einige Zeit dauern kann.

Nicht meine jsfiddle, aber hier ist eine mit dem Problem: http://jsfiddle.net/Rnt9N/2/
Sieht auf dem Mac gut aus, ist aber unter Firefox unter Windows 7 nervös.

es ist nicht so schlimm für mich (Firefox 22 / w7 x64).

Ich habe das gleiche Problem mit Node-Webkit v0.7.5.
Endete mit spin.js

Wiedereröffnung dieses, da es auch FontAwesomes Schuld ist

Wenn Sie .fa-spin { -webkit-filter: blur(0); } wie diesen Tweet machen , wird dies für mich behoben.

@paldepind danke für das Teilen dieser Lösung

Können Sie bitte eine Geige bereitstellen, die den aktuellen Spin und den vorgeschlagenen Spin nebeneinander zeigt?

Sie können diese Geige gabeln: http://jsfiddle.net/tagliala/HgYqA/

Ich sehe keine Unterschiede im Wackeln mit Chrome unter Windows 7. Ich bemerke nur, dass sich das Symbol "langsamer" dreht, wie bei der halben fps-Rate

@tagliala du bist willkommen!

Hier ist eine Geige, die zwei Spinner zeigt, einen mit und einen ohne Fix: http://jsfiddle.net/paldepind/XLdQX/

Ich habe mit Chrome 30 und Firefox 24 unter Linux getestet. In Firefox ist alles glatt, aber in Chrome ist der Spinner ohne Fix etwas wackelig. Ich sehe jedoch in keinem der Browser einen Unterschied in der Rotationsgeschwindigkeit.

Chrome 32 unter Windows 7 zeigt das Symbol überhaupt nicht an ...

In GNU / Linux funktioniert das Update mit Chromium 30. Nicht dasselbe für Firefox 26, da die Filtereigenschaft noch nicht unterstützt wird. https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Für Firefox 26 unter Windows 8 sind beide für mich immer noch wackelig. In Chrome 31 unter Windows 8 sehen beide gut aus.
Am 12. Dezember 2013, um 14:20 Uhr, schrieb Felipe Peñailillo [email protected] :

In GNU / Linux funktioniert das Update mit Chromium 30. Nicht dasselbe für Firefox 26, da die Filtereigenschaft noch nicht unterstützt wird. https://developer.mozilla.org/en-US/docs/Web/CSS/filter

- -
Antworte direkt auf diese E-Mail oder sieh sie dir auf GitHub an.

Leider wird es unter Windows nicht angezeigt und saugt unter OSX :(

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

Das sich drehende Symbol ist nicht antialiasiert und wackelt weiter

Ich hoffte, dass dies eine praktikable Problemumgehung war, aber das ist es nicht

@tagliala Das ist unglücklich. Ich hatte das Update auf meinem Computer nur mit Linux mit großartigen Ergebnissen versucht.

@paldepind oh ich weiß ich erinnere mich, dass auf meiner Ubuntu-Maschine das sich drehende Zeug wirklich scheiße ist

Können Sie bitte versuchen, Subpixel-Transformationen durchzuführen :

Hallo! Ich habe heute auf Chrome 31 aktualisiert und jetzt ist das Wackeln verschwunden. Vielleicht verschwindet dieses Problem von selbst.

@tagliala nicht sicher, was ich sehen soll. Es sieht alles so aus, wie ich es mir vorstellen sollte. Aber auch dies ist in Chrome 31, wo ich das Wackelproblem nicht mehr sehe.

@tagliala Die Subpixel-Transformations-Geige zeigt auf Chrome 31 und Firefox 26 in Kubuntu immer noch Wackelgefühl.

Ich stimme jedoch zu, dass dies durch Subpixel-Rendering verursacht wird.

Hier ist eine neue Geige, die einen Rotationsbuchstaben O ("oh") mit einem roten, kreisförmigen Rand zeigt.

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

Dieses Beispiel verschärft den Wackeleffekt wirklich, da sich der rote Rand sanft dreht, das O jedoch wackelt.

-webkit-filter: blur(0); behebt das Problem für mich. Ich kann keine anderen Anweisungen finden, die das Problem beheben, einschließlich --webkit-font-Smoothing.

Ich habe auch versucht, das KDE-Anti-Aliasing für Schriftarten zu deaktivieren (Systemeinstellungen -> Anwendungsdarstellung -> Schriftarten -> Anti-Aliasing verwenden = Deaktiviert), und dies behebt auch das Problem.

Leider ist -webkit-filter: blur(0); keine Lösung, da es Fenster kaputt macht

@tagliala nicht sicher, in welcher Windows-Version es für Sie nicht funktioniert. Ich habe die in Chrome und IE 11 vorgeschlagene Lösung getestet. Sie scheint mit Firefox nicht zu funktionieren.

@silentworks bricht es Win7 x64 - Chrome 32

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

Darüber hinaus ist es, wenn es funktioniert, wirklich schlecht gegen Vorurteile.

Ich denke, das Hauptproblem ist, dass Symbole in Schriftarten nicht perfekt zentriert sind: http://jsfiddle.net/XLdQX/5/

Wie Sie im folgenden Screenshot sehen können, befinden sich unten 3 leere Pixel und oben 2 leere Pixel, die das Wackeln verursachen.

Wenn Sie die Breite so einstellen können, dass das Symbol zentriert ist, wackelt das Symbol nicht: http://jsfiddle.net/XLdQX/6/

IMHO sollte diese Drehfunktion entfernt werden, es verursacht mehr Probleme als Vorteile

WONTFIX weil viel Arbeit: -1:
aber ja, es war geschickt ... aber nicht notwendig. Das Wiederherstellen aller Schriftarten, um einige Symbole zum Drehen zu bringen, ist eine Menge Arbeit und widerspricht der Flut.

@conrado hier gibt es kein "wontfix" -Label

Es ist immer noch ein Wontfix. Vielleicht könnten einige der für den Spin geeigneten Gryphs überarbeitet werden

Es ist immer noch ein Wontfix.

Nein, ist es nicht. Es ist richtig geöffnet und als Fehler gekennzeichnet

Ich bin mir nicht wirklich sicher, welchen Status dieses Problem hat, selbst nachdem ich die Kommentare gelesen habe, aber da es immer noch als offen markiert ist: Chromium 31 und Firefox Aurora 28 (2014-1-13) auf Xubuntu haben immer noch Probleme.

@ ahamilton9 Schauen Sie hier: https://github.com/FortAwesome/Font-Awesome/issues/2709#issuecomment -32045585

Ok, ich denke, es ist ein Browser-Fehler in jeder Schriftart.
Es gibt drei Beispiele: http://jsfiddle.net/3T8Kz/

Erstens: Font-Awesome-Schrift mit dem Fehler zentriert.
Zweitens: Ein weiteres Beispiel, aber mit einer normalen Schriftart
Drittens: Ohne Schriftarten, nur ein Div, mit derselben Animation und ohne Fehler.

Der gleiche Fehler für mich Firefox 31, Linux.
Wenn dies durch die Größe der Glyphen verursacht wird, reicht es aus, nur Glyphen zu reparieren, die sich drehen sollen, nicht alle.

: +1: +1 Dies sollte für die nächste Hauptversion berücksichtigt werden, in der vermutlich alle Glyphen überprüft werden.

Sie sehen dieses Problem sogar auf der offiziellen Website: http://i.gyazo.com/3ba2d0afad90c2e7fe6d2c0bb34e661d.mp4

(Neueste Version von Firefox)

Würde gerne sehen, dass dies behoben wird: +1:

Pull-Anfragen und eingehende Untersuchungen zu diesem Thema sind sehr willkommen

Dies scheint ein Chrome-Bug zu sein

@ Davegandy irgendein Update?

@thejhnz

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

Gleiches gilt für Chrome 37.0.2062.124 unter Mac OS X, Safari unter iOS 7.0.4

+1

Ich war in der Lage, dieses Problem für die Fa-Aktualisierung in einem lokalen Projekt mit zu behandeln (ich werde nicht sagen, es zu lösen)
-webkit-transform-origin: 49% 48,5%;
-moz-transform-origin: 49% 48,5%;
-ms-transform-origin: 49% 48,5%;
-o-Transformationsursprung: 49% 48,5%;
Transformationsursprung: 49% 48,5%;

Ich verwende "fa-circle-o-notch" als Ladesymbol und verwende diese Werte, um den Ursprung so zu transformieren, dass er nicht wackelt

.fa-Kreis-o-Kerbe.fa-Spin {
-webkit-transform-origin: 50% 48,9%;
-moz-transform-origin: 50% 48,9%;
-ms-transform-origin: 50% 48,9%;
-o-Transformationsursprung: 50% 48,9%;
Transformationsursprung: 50% 48,9%;
}}

@magnyld Ich habe das gerade versucht,

Sie können sich nicht auf die Ursprungstransformation verlassen. Dies kann zu Problemen führen, wenn das Symbol größer oder kleiner ist. Wie ich bereits sagte, ist dies kein großartiges Problem, denn wenn Sie versuchen, ein Div im perfekten Kreisstil zu drehen, ist das Ergebnis dasselbe. Ich wette, das ist ein Fehler in der Webkit-Engine.

Nein, dies ist auch in Firefox vorhanden. Https://bugzilla.mozilla.org/show_bug.cgi?id=930079

Wackeln in Firefox 33, OSX.

Gleiches Problem hier ( wackelnder Spin ) :(

Pull-Anfragen mit einer eingehenden Analyse dieses Problems, einer Problemumgehung und einer angemessenen Erläuterung der Vor- und Nachteile werden sehr begrüßt.

Das Problem scheint vom Symbol selbst zu kommen. Wenn Sie die Icomoon-Spinner-Version verwenden, wackelt sie überhaupt nicht. Es funktioniert gut unter Chrome 39, Windows und IE11, Windows. Ich weiß es nicht für die anderen Browser.

http://jsfiddle.net/cxxzh0uf/

@ Skoub

Der Ansatz von icomoon, Symbole alle gleich groß zu halten, scheint für diesen Zweck besser zu sein, reicht jedoch nicht aus.

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

Wenn ich das Pseudoelement :before inspiziere, stelle ich fest, dass fontawesome "seltsam" ist.

Ich habe versucht, die gleiche Breite und Höhe einzustellen, aber es wird nicht besser.

Ich denke, dass dies mit der Schriftart selbst zusammenhängt und wir nichts über CSS tun können.

Dave sollte sich die Schriftart ansehen und die von Icomoon generierten Schriftarten untersuchen, um zu verstehen, wie dieses Problem am besten behoben werden kann.

Wir können keine Pull-Anfragen mit Änderungen an der .otf-Datei akzeptieren, aber wir werden uns über Hilfe in dieser Angelegenheit freuen. Wenn jemand hier in der Lage ist, einen Blick auf die Schriftart zu werfen und das Problem zu identifizieren, ist dies sehr willkommen

Entschuldigung für mein Englisch, es ist auch spät hier :)

@tagliala, danke, dass verlinkt hast. Es ist das gleiche Problem, das auch die anderen erwähnen.
Ich habe festgestellt, dass fa-cog das gleiche Problem hat, aber es ist unter den gleichen Umständen nicht so auffällig wie fa-clock oder einige der anderen oben genannten. Ich werde diesen Thread weiter beobachten und berichten, wenn ich Problemumgehungen finde, aber ich bin ziemlich überzeugt, dass es die kleinen Unvollkommenheiten in den Glyphen selbst sind, die nur einmal beim Drehen auftauchen, sonst sind sie zu klein, um sie mit bloßem Auge zu bemerken

Ich habe das gleiche Problem festgestellt. Gibt es eine bestätigte Lösung dafür?

@ TsuiJie nein, gibt es nicht

Ich hatte ein ähnliches Problem mit den Schüttelsymbolen in IE10 und 11.

Mein Problem war, dass in IE 10/11 die Bildlaufleisten angezeigt und ausgeblendet wurden (pulsierten), solange der Spinner sichtbar war.

Was ich fand, war, dass durch Einstellen der Höhe und Breite des Symbol-Tags auf eine festgelegte Größe (dieselbe Größe wie das Symbol selbst) das Pulsieren aufhörte.

Hoffe es hilft jemandem.
Prost

Okay, ich habe herausgefunden, dass das Problem bei der Konvertierung von Font Squirrel in Webfont-Formate liegt. Sieht so aus, als würde es einige der Metriken durcheinander bringen. Mein Plan:

• Test mit einer frischen Version von Font Squirrel
• Wenn das nicht funktioniert, rollen Sie meine eigene Konvertierungslösung

Okay, nach einer beträchtlichen Menge an Nachforschungen habe ich einige Korrekturen vorgenommen:

• Der fa-spinner wurde aktualisiert, um beim Drehen einen besseren visuellen Effekt zu erzielen.
• Eine Webfont-Konvertierung wurde nach Hause gerollt. Font Squirrel hat definitiv alles durcheinander gebracht.
• Einige Schriftmetriken wurden angepasst, die anscheinend keine Auswirkungen auf den Mac haben, aber häufig von Windows verwendet werden.
• Der visuellen Testseite (http://fontawesome.io/test/) wurden animierte Beispiele hinzugefügt.

Die Ergebnisse

• Retina Mac: Makellos in Chrome, Safari und Firefox
• Mac ohne Netzhaut: Viel besser in Chrome, Safari und Firefox
• Windows 7: IE11 sieht einwandfrei aus, Chrome 39 hat immer noch Probleme, aber ich denke nicht, dass es schlimmer ist als es war

Eine Einschränkung

• Bei einigen Schriftgrößen gibt es in allen Browsern ein leichtes Wackeln (Icomoon hat das gleiche Problem). Wenn Sie es auf ein Vielfaches und ein halbes Vielfaches der optimierten Auflösung (z. B. 14px, 21px, 28px, 35px) beschränken, verschwindet das Wackeln im Grunde genommen.

Da die Ergebnisse viel besser sind als sie waren, werde ich dies für 4.3 als akzeptabel bezeichnen und das Problem für 5.0 offen halten.

Noch ein Update. Ich habe herausgefunden, welche ausgewählte Option für die Font Squirrel-Konvertierung nicht gut funktioniert. Also habe ich diese Dateien wieder abgelegt. Offen gelassen.

@ Davegandy , ich sehe keine Verbesserung auf meiner Seite mit Firefox & Chrome unter Windows. Ich habe IE11 nicht ausprobiert. Sie können das Wackeln deutlich sehen, wenn Sie Schritte in der Animation verwenden.

Ich verstehe, dass Sie im 4.x-Zweig nicht viel tun können, aber gibt es eine solide Lösung für den 5.x-Zweig?

.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);
}

Für alle anderen, die es bis hierher geschafft haben und nach einer Fehlerbehebung suchen:

Verwenden Sie fa-spin und fa-fw zusammen.

Dies stellte sich als mein Problem (und meine Lösung) heraus.

@ Skoub

IE11 ist fast perfekt, meiner Meinung nach das Beste in Windows.

Das Spinner-Symbol ist neu und sollte besser sein als zuvor.

Schauen Sie sich das Ende dieser umfangreichen Seite mit allen Browsern an: http://fontawesome.io/test/

Chrome und Firefox sind bei kleinen Größen wirklich schlecht: enttäuscht:

Mit IE11 und Fa-Puls gibt es einen kleinen Fehler. Es ist, als würde sich der Spinner beim nächsten Animationsschritt um 1 Pixel nach oben und unten bewegen.

Es funktioniert für mich auf IE 11 und Chrome 40.0.2214.115 m, aber es wackelt in Firefox 35.0.1.

In Firefox 36 für Linux immer noch erkennbar.

Das Video wird mit 50 FPS aufgenommen.

Das Hinzufügen von scaleZ(1.001) behebt das Problem für Firefox 36 unter Linux.

Ich bin mir nicht sicher, ob mein Problem das gleiche war wie das aller anderen, es schien eher das Problem Nr. 4017 zu sein, aber das wurde geschlossen und hier umgeleitet, also werde ich meine Lösung einfach hier posten.

Scheint, wenn Sie der .fa-Spin-Klasse einfach Folgendes hinzufügen.

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

Schien das Wackeln für mich zu beheben.

Weder das Vermeiden von fa-fixed @qJake noch das Ausrichten von Text : center @JakeCooper behebt es für mich:

(Ohne Fa-Spin gibt es keinen Jitter).

@isaksky Könnten Sie bitte eine Geige zur Verfügung stellen, die dieses Problem zeigt? ich habe eine Idee

@tagliala Hier geht's:

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

Chrome 40.0.2214.115, Windows 7. Dieses Problem kann auf dem bereitgestellten Codepen nicht reproduziert werden.

Welcher Browser gibt Ihnen diese Ausgabe?

Ich bin gerade nicht auf meinem Arbeitscomputer, aber ich glaube, es ist das neueste normale Chrome unter Windows 8. Normalerweise kann ich es hier auf diesem Mac in Chrome nicht reproduzieren, aber wenn ich auf 110% oder 125% zoome Beispiel, es wird angezeigt. (Es gibt auch ein Problem, bei dem meine Schaltflächen vertikal gestapelt sind, aber das ist nicht das Problem, das ich meine (ich denke, ich kann das mithilfe von ems beheben).) Tritt der Jitter bei Ihnen auf, wenn Sie mit dem Zoom herumspielen?

Ich habe es gerade auch bei normalem (100%) Zoom auf diesem Mac geschafft. Scheint mit dem Durcheinander mit dem Zoom und / oder dem Wechseln der Browser-Registerkarten zu tun zu haben. Übrigens tritt das Problem auch bei $('#spin-pls').toggleClass("fa-spin") (anstatt das Verstecken zu aktivieren, wenn es sich bereits dreht), wodurch möglicherweise etwas klarer wird, wo das Problem liegt.

Ich werde morgen mit meinem Mac überprüfen

Ich habe hier eine Problemumgehung, um das Zahnrad zu drehen. Schön und geschmeidig, wenn Sie schweben.

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

Ich habe eine Keyframe-Animation erstellt, die sich nur um 30 Grad dreht ( rotateFa unten). Dann nenne ich das so animation: rotateFa .1s infinite;

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

Und das Gegenteil, um es umzukehren

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

Problem besteht immer noch.

Es ist im deaktivierten Modus für die Hardwarebeschleunigung weiterhin vorhanden. Firefox 36.0.4.

Bitte nicht +1 oder bestätigen, dass dieses Problem weiterhin besteht, da das Problem offen ist und wir nicht wissen, wie es behoben werden kann.

Bitte schauen Sie hier: https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -65381998

Vielleicht wäre es eine gute Idee, die Beispielseite auf den Kopf zu stellen? Das Problem ist groß genug für mich, um vor animierten Symbolen sehr vorsichtig zu sein, aber laut https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -71056820 würden Sie es auf einem Retina-Mac nicht bemerken - auch wenn Sie auf allen gängigen Browsern getestet haben.

@Vusys Ich stimme zu. Sie könnten eine PR gegen die Hauptniederlassung senden oder mir sagen, was ich schreiben soll, und ich werde es tun

@tagliala erledigt mit Pull-Anfrage # 6686, die die folgende Warnung unter den Beispielen hinzufügt:

Einige Browser auf einigen Plattformen haben Probleme mit animierten Symbolen, was zu einem nervösen Wackeleffekt führt. In Ausgabe 671 finden Sie Beispiele und mögliche Problemumgehungen.

@Vusys danke!

Ich sehe ein viel schlimmeres Wackeln als nur +/- 1 Pixel. Es gibt eine seltsame Wechselwirkung zwischen der Spin-Transformation und anderen CSS-Transformationen, so dass sich das Rotationszentrum manchmal außerhalb des Spinner-Symbols befindet.

Ich habe noch nicht genau festgelegt, welche CSS-Regel dieses Problem auf meiner Website verursacht, aber es sieht aus wie ein Fall einer fehlerhaften Transformationsreihenfolge. Die Reihenfolge sollte lauten: Mitte des Symbols nach (0,0) verschieben, dann um den aktuellen Winkel drehen und dann (0,0) in die Bildschirmposition übersetzen, an der das Symbol in der Mitte angezeigt werden soll (oder umgekehrt). Irgendwo dort wirft CSS eine weitere Übersetzung in den Mix.

_Update: _ Ich habe herausgefunden, was das Problem in meinem Fall war, daher werde ich die Antwort hier veröffentlichen, falls jemand anderes davon profitieren kann: Ich hatte eine CSS-Regel, die die Breite des 'i'-Elements des Spinners änderte wurde in gespeichert (das Bootstrap-Element, das für FA-Symbole verwendet wird). Dies führt je nach Kontext des Symbols zu unvorhersehbaren Ergebnissen (z. B. abhängig davon, ob der Text zentriert wurde oder nicht).

Ich habe nicht festgelegt, welche CSS-Regel

Ich bin ziemlich sicher, dass es keine CSS-Regel ist und das Problem nicht mit FA selbst zusammenhängt

Schauen Sie hier: http://jsfiddle.net/tagliala/g0ngLhyr/

@tagliala , wenn es nicht mit einer CSS-Regel oder FA zusammenhängt, wie erklären Sie, dass Icomoon keinen Wobble-Effekt hat?

Demo: http://jsfiddle.net/cxxzh0uf/

Ein weiteres Beispiel ist das von Google: http://www.getmdl.io/components/index.html#loading -section / spinner

@skoub deine Geige auf 4.3.0 aktualisiert: http://jsfiddle.net/tagliala/cxxzh0uf/9/

Schauen Sie hier: http://jsfiddle.net/tagliala/g0ngLhyr/

Beachten Sie, dass diese Geige überhaupt keine Webfonts hat und dennoch das Wackeln zeigt

Die Implementierung von @skoub google basiert nicht auf Webfonts und IMHO ist dies der richtige Weg, um mit dieser Funktion umzugehen.

Ich möchte meine Erfahrungen hier teilen.

Einzelne Symbole:
Ich habe nur ein Problem mit dem Wackeln mit gestapelten Symbolen. Einzelne Symbole drehen oder pulsieren einwandfrei

Gestapelte Symbole:
Anscheinend wackelt auf meiner Website der folgende Code nicht in einem Titel, in dem die Schriftart etwas größer ist, sondern in der Schrift, wenn die Schriftart kleiner ist. Der Fa-Puls wackelt in beiden Fällen

Haftungsausschluss: Ich bin sehr neu in all diesen Dingen, aber da meine Website sowohl wackelige als auch gute Ergebnisse liefert, dachte ich, dass Sie alle es wissen möchten.

@isaksky Das Wackeln / Verwischen mit dem Spinner hat mit der Hardwarebeschleunigung zu tun

Bei Elementen, die mit der Klasse .hide angezeigt / ausgeblendet werden, kann der Browser darauf hinweisen, dass Inhalte ausgeblendet werden

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

Gecko-basierte Browser wie Firefox haben jedoch zumindest für mich immer noch Probleme mit dem Springen von Text im Dialogfeld.

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

funktioniert, wirkt sich jedoch negativ auf Chrome aus, indem der Text ständig überkompensiert und verwischt wird. Ich habe zwei mögliche Lösungen gefunden, die erste zielt nur auf Firefox ab, die zweite ist eine andere Beschleunigung, filter: blur(0); , die in diesem Fehler vermerkt ist, aber meiner Meinung nach ein bisschen hackig - ähnlich wie transform: translateZ(0); - -und könnte in Zukunft zu negativen Ergebnissen führen.

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

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

Das behebt das Problem, danke @toastal ! Könnte dies zu einer allgemeinen Lösung @tagliala verarbeitet werden ?

@toastal Stört es Sie, eine jsfiddle bereitzustellen, die Ihre Lösung zeigt und mit dem grundlegenden Fontawesome-Spin vergleicht?

Ich versuche alle Beispiele, die ihr gepostet habt, und ich kann sie in Firefox Aurora nicht reproduzieren:

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

Ich bin auf Debian Jessie und aufgrund einiger Probleme mit dem NVIDIA-Treiber glaube ich, dass ich keine Hardwarebeschleunigung habe.

GLXtest-Prozess fehlgeschlagen (mit Status 1 beendet): GLX-Erweiterung fehlt
Procesador WebGL Bloqueado para tu tarjeta gráfica debido a problemas no resueltos del controlador.

Auch kann hier nicht reproduzieren:
http://shb.github.io/bootstrap-loading-screen/#icon : spinner

ist es gelöst oder liegt es daran, dass ich die Hardwarebeschleunigung nicht aktiviert habe?

Dank dieses Beitrags habe ich eine weitere mögliche Lösung für dieses Problem gefunden (Firefox 39 wird ausgeführt): http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css -Transformationen /

Ich habe die JSFiddle oben mit dem Fix bearbeitet: http://jsfiddle.net/5z9om45L/

Fügen Sie einfach "Perspektive (1px)" in die Transformationseigenschaft ein. Dies "wirft das Rendern des Objekts auf die GPU", wie in dem oben verlinkten Beitrag angegeben. Ich habe dies nicht persönlich ausführlich getestet, daher weiß ich nicht, was genau dies bewirkt oder ob es andere Probleme verursacht, aber bisher sieht es gut aus. Dies war eines meiner größten Probleme mit Firefox, daher dachte ich, ich würde es hier erwähnen.

Ich habe die JSFiddle oben mit dem Fix bearbeitet: http://jsfiddle.net/5z9om45L/

Es behebt das Problem ganz gut für mich.

Hier ist eine aktualisierte Geige, die das Wackeln auf dem Kompass zeigt. Die zweite Ortungstaste zeigt einen einfachen Fa-Spin mit ausgeprägtem Wackeln.

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

@spiderr anscheinend erhöht fa-lg den Wobble-Effekt, da es sich um Zeilenhöhe und Schriftgröße handelt. Versuchen Sie, eine Schriftgröße von 14px oder ein Vielfaches zu verwenden

@ Tagliala danke, toller Tipp! fa-2x definitiv besser. Es gibt auch einige seltsame Artefakte (schmutzige Pixel) um den Kreis. Hier ist eine Geige bei fa-5X, die sie auf dem großen blauen Knopf deutlicher zeigt. Dies ist ein winziges Detail, aber wenn jemand jemals den Kompass aufräumt, wäre das großartig. Ich hoffe, dass man beim Drehen des Kompasses nicht erkennen konnte, dass sich der Kreis bewegte, sondern nur die innere Kompassnadel. Wenn ich mit fa-5x 2 Meter vom Bildschirm entfernt sitze, sieht es toll aus :-)

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

Ich bin mir nicht sicher, ob dies der richtige Thread ist, aber ..
In Firefox hört mein "fa fa-cog fa-spin" auf, sich zu drehen. Ich benutze es in einem Ajax-Aufruf mit einem Modal. Es funktioniert gut in Safari und Chrome, aber Firefox stoppt aus irgendeinem Grund. Irgendwelche Gedanken?

app / javascripts / my_file.js
$ (Dokument) .ready (Funktion () {
$ ('# search_btn'). on ('click', function () {
$ ('# results'). empty ();
var myForm = $ ('# user_search');
$ ("# spinner_modal"). modal ("show");
$ .ajax ({
URL: myForm.attr ('Aktion'),
Typ: "POST",
Daten: myForm.serialize (),
Datentyp: 'Text',
Erfolg: Funktion (html) {
$ ("# spinner_modal"). modal ("hide");
$ ('# results'). append (html);
},
Fehler: Funktion (xhr, satus, err) {
$ ("# spinner_modal"). modal ("hide");
},
Zeitüberschreitung: 60000
});
falsch zurückgeben;
});

_my_partial.html.erb

jonathanparrish am 11. Aug. 2015