이상한 Firefox. 이 프로젝트에서 IE만큼이나 고통 스러웠습니다. 3.0.1을 사용하고 있습니까? 이 문제에 도움이되는 새로운 Mozilla 특정 스핀 클래스가 있습니다. 그래도 문제가 발생하는 경우 알려 주시면 다시 열겠습니다.

3.0.1을 사용하고 있음을 확인할 수 있으며 다시 다운로드하고 두 번 확인했는데 문제가 지속됩니다.

이전 의견에서 내 예제가 제거 된 것 같습니다.이 문제가 발생하는 mako 템플릿을 보내 드리겠습니다.

Chromium (24.0.1312.56)에서 .icon-spin을 사용하고 Linux에서 Chrome을 사용할 때 흔들림 / 흔들림이 있습니다. Firefox (18.0.2)는 괜찮아 보입니다. 13d5dd373cbf3f2bddd8ac2ee8df3a1966a62d09에서 테스트 됨

firefox 18.0.2에서 흔들림 / 흔들림이 발생하지만 특정 상황에서 Chrome이나 IE에서는 그렇지 않습니다. 그러나 정확한 원인을 찾아 낼 수 없었습니다. (font-awesome v3.0.2 사용)

나는 Windows 7의 모든 브라우저에서 흔들리고 있지만 OSX에서는 아름다움입니다.

@davegandy 핑

Chrome 버전 26.0.1410.65 (상당히 최신 버전)에서 흔들림이 발생합니다. 이것에 대한 작업이 있습니까?

핑! 나도 문제가 있습니다. 여전히 지속되므로 문제가 종결 된 이유를 알 수 없습니다.

문제를 설명하는 바이올린을 제공해 주시겠습니까?

여기에 같은 문제, 어떤 해결책이 있습니까?

최신 버전의 Chrome (28.0.1500.71)을 확인했습니다. 아이콘이 작을수록 움직임이 더 과장됩니다. 이 문제는 호출되는 모든 위치에서 아이콘 스핀 클래스에 영향을줍니다.

나는 성공하지 않고 3D 회전을 시도했습니다. icon-circle 자체를 회전하는 것은 문제입니다.

Windows 7에서 Firefox 22.0, Chrome 28.0.1500.72에 문제가 있습니다. IE 8-10의 흔들림은 거의 보이지 않지만 문제를 관찰 한 사례를 자세히 살펴보면 여전히 약간의 흔들림이있는 것 같습니다. 문제에 대한 바이올린을 설정하기 위해 최선을 다할 것이지만 시간이 걸릴 수있는 충분한 컨텍스트가 있습니다.

내 jsfiddle은 아니지만 여기에 문제가있는 항목이 있습니다. http://jsfiddle.net/Rnt9N/2/
Mac에서는 멋지게 보이지만 Windows 7의 Firefox에서는 불안정합니다.

나에게 그렇게 나쁘지 않습니다 (firefox 22 / w7 x64).

node-webkit v0.7.5를 사용하여 동일한 문제가 있습니다.
spin.js를 사용하여 끝났습니다.

FontAwesome의 잘못이기 때문에 이것을 다시여십시오.

이 트윗 처럼 .fa-spin { -webkit-filter: blur(0); } 을 (를)하면 나에게 문제가 해결되었음을 제안합니다.

@paldepind 이 솔루션을 공유해 주셔서 감사합니다

현재 스핀과 제안 된 스핀을 나란히 보여주는 바이올린을 제공해 주시겠습니까?

이 바이올린을 포크 할 수 있습니다 : http://jsfiddle.net/tagliala/HgYqA/

Windows 7에서 Chrome과의 흔들림에 차이가 없습니다. 절반 fps 속도에서와 같이 아이콘이 "느리게"회전하는 것을 알 수 있습니다.

@tagliala 천만 에요!

다음은 수정없이 두 스피너, 하나 하나를 보여주는 바이올린이있다 : http://jsfiddle.net/paldepind/XLdQX/

Linux에서 Chrome 30 및 Firefox 24로 테스트했습니다. Firefox에서는 모든 것이 부드럽지만 Chrome에서는 수정 사항이없는 스피너가 약간 흔들립니다. 그래도 브라우저에서 회전 속도의 차이는 보이지 않습니다.

Windows 7의 Chrome 32는 아이콘을 전혀 표시하지 않습니다 ...

GNU / Linux에서는 Chromium 30에서 수정이 작동합니다. 필터 속성이 아직 지원되지 않기 때문에 Firefox 26에서는 동일하지 않습니다. https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Windows 8의 Firefox 26의 경우 둘 다 여전히 저에게 흔들립니다. Windows 8의 Chrome 31에서는 둘 다 괜찮아 보입니다.
2013 년 12 월 12 일 오후 2시 20 분에 Felipe Peñailillo [email protected] 은 다음과 같이 썼습니다.

GNU / Linux에서는 Chromium 30에서 수정이 작동합니다. 필터 속성이 아직 지원되지 않기 때문에 Firefox 26에서는 동일하지 않습니다. https://developer.mozilla.org/en-US/docs/Web/CSS/filter

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.

불행히도 Windows에는 표시되지 않으며 OSX에서는 짜증납니다.

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

회전하는 아이콘이 앤티 앨리어싱되지 않고 계속 흔들립니다.

이것이 실행 가능한 해결 방법이기를 바랐지만 그렇지 않습니다.

@tagliala 안타깝군요 . 나는 Linux를 사용하는 내 컴퓨터에서만 수정을 시도하여 훌륭한 결과를 얻었습니다.

@paldepind 오, 우분투 기계에서 회전하는 물건이 정말 짜증 난다는 것을 기억합니다.

서브 픽셀 변환을 시도해 주시겠습니까? http://jsfiddle.net/tagliala/96ULe/3/

안녕하세요! 오늘 Chrome 31로 업데이트했는데 이제 흔들림이 사라졌습니다. 그래서 아마도이 문제는 저절로 사라질 것입니다.

@tagliala 내가 뭘 봐야할지 모르겠습니다. 내가 생각해야 할 모든 것 같습니다. 그러나 이것은 Chrome 31에서 더 이상 흔들림 문제가 발생하지 않습니다.

@tagliala 하위 픽셀 변환 바이올린은 여전히 ​​쿠분투의 Chrome 31 및 Firefox 26에서 흔들림을 보여줍니다.

그러나 이것이 서브 픽셀 렌더링 때문이라는 데 동의합니다.

여기에 빨간색 원형 테두리가있는 회전 문자 O ( "oh")를 보여주는 새로운 바이올린이 있습니다.

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

이 예제는 빨간색 테두리가 부드럽게 회전하지만 O가 흔들 리기 때문에 흔들림 효과를 실제로 악화시킵니다.

-webkit-filter: blur(0); 이 (가) 문제를 해결해줍니다. --webkit-font-smoothing을 포함하여이를 수정하는 다른 지시문을 찾을 수 없습니다.

또한 KDE의 글꼴 앤티 앨리어싱 (시스템 설정-> 응용 프로그램 모양-> 글꼴-> 앤티 앨리어싱 사용 = 사용 안 함)을 비활성화하려고 시도했으며 _ 이것은 문제도 해결합니다 _.

불행히도 -webkit-filter: blur(0); 는 창을 깨기 때문에 해결책이 아닙니다.

@tagliala 가 어떤 버전의 Windows에서 작동하지 않는지 확실하지 않습니다. 최신 Chrome 및 IE 11에서 제안 된 솔루션을 테스트했습니다. Firefox에서 작동하지 않는 것 같습니다.

@silentworks , Win7 x64 중단

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

또한 작동 할 때 앤티 앨리어싱이 정말 좋지 않습니다.

주요 문제는 글꼴 내부의 아이콘이 완벽하게 중앙에 있지 않다는 것입니다. http://jsfiddle.net/XLdQX/5/

아래 스크린 샷에서 볼 수 있듯이 아래에 3 개의 빈 픽셀과 위에 2 개의 빈 픽셀이 있습니다. 이로 인해 흔들림이 발생합니다.

아이콘이 가운데에있는 방식으로 너비를 설정할 수 있으면 아이콘이 흔들리지 않습니다. http://jsfiddle.net/XLdQX/6/

IMHO이 회전 기능을 제거해야합니다. 이점보다 더 많은 문제가 발생합니다.

WONTFIX는 많은 작업을하기 때문에 : -1 :
하지만 예, 멋졌지만 ... 필수는 아닙니다. 일부 아이콘을 회전시키기 위해 모든 글꼴을 다시 실행하는 것은 많은 작업이며 조류에 어긋납니다.

@conrado 여기에 "wontfix"레이블이 없습니다.

그것은 여전히 ​​원칙입니다. 회전에 적합한 문양 중 일부를 다시 작업 할 수 있습니다.

그것은 여전히 ​​원칙입니다.

아니, 그렇지 않습니다. 제대로 열리고 버그로 레이블이 지정되었습니다.

댓글을 읽은 후에도이 문제의 상태는 확실하지 않지만 여전히 열려있는 것으로 표시 되었기 때문에 Xubuntu의 Chromium 31 및 Firefox Aurora 28 (2014-1-13)은 여전히 ​​흔들립니다.

@ ahamilton9 여기를보세요 : https://github.com/FortAwesome/Font-Awesome/issues/2709#issuecomment -32045585

좋아, 모든 글꼴의 브라우저 버그라고 생각합니다.
세 가지 예가 있습니다. http://jsfiddle.net/3T8Kz/

첫째 : Font-Awesome 글꼴이 중앙에 위치하며 버그가 있습니다.
둘째 : 일반 글꼴을 사용하는 또 다른 예
셋째 : 글꼴없이 div 만 있고 애니메이션이 같고 버그가 없습니다.

나에게 Firefox 31, Linux에 대한 동일한 버그.
이것이 글리프 크기로 인해 발생하는 경우-모든 글리프가 아닌 회전하려는 글리프 만 수정하는 것으로 충분합니다.

: +1 : +1 아마 모든 글리프가 재검토 될 다음 메이저 버전에서 고려되어야합니다.

공식 웹 사이트 에서도이 문제를 본다 :

(최신 버전의 Firefox)

이 고정 된 것을보고 싶습니다 : +1 :

이 문제에 대한 풀 리퀘스트와 심층 조사를 환영합니다

이것은 크롬 버그 인 것 같습니다

@davegandy 업데이트가 있습니까?

뿡뿡

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

Mac OS X의 Chrome 37.0.2062.124, iOS 7.0.4의 Safari에서 동일

+1

나는 지역 프로젝트에서 fa-refresh를 위해이 문제를 처리 할 수있었습니다 (해결하지 않겠습니다)
-webkit-transform-origin : 49 % 48.5 %;
-moz-transform-origin : 49 % 48.5 %;
-ms- 변환-원점 : 49 % 48.5 %;
-o- 변환 기원 : 49 % 48.5 %;
변환 기원 : 49 % 48.5 %;

"fa-circle-o-notch"를 로딩 기호로 사용하고이 값을 원점 변환에 사용하여 흔들리지 않도록합니다.

.fa-circle-o-notch.fa-spin {
-webkit-transform-origin : 50 % 48.9 %;
-moz-transform-origin : 50 % 48.9 %;
-ms- 변환 출처 : 50 % 48.9 %;
-o- 변환 기원 : 50 % 48.9 %;
변환 기원 : 50 % 48.9 %;
}

@magnyld 방금 시도했지만 DOM 변경 후에도 계속 흔들립니다.

origins transform을 사용할 수 없습니다. 아이콘이 크거나 작 으면 깨질 수 있습니다. 이전에 말했듯이 이것은 완벽한 원 스타일의 div를 회전하려고하면 결과가 동일하기 때문에 글꼴 문제가 아닙니다. 나는 이것이 웹킷 엔진 버그라고 확신합니다.

아니요, 이것은 firefox에도 있습니다 https://bugzilla.mozilla.org/show_bug.cgi?id=930079

Firefox 33, OSX에서 흔들림.

여기에 같은 문제가 있습니다 ( 흔들리는 스핀 ) :(

이 문제에 대한 심층 분석, 해결 방법 및 장점과 단점에 대한 적절한 설명이 포함 된 풀 요청을 매우 환영합니다.

문제는 아이콘 자체에서 비롯된 것 같습니다. Icomoon 스피너 버전을 사용하면 전혀 흔들리지 않습니다. Chrome 39, Windows 및 IE11, Windows에서 잘 작동합니다. 다른 브라우저는 모르겠습니다.

http://jsfiddle.net/cxxzh0uf/

윰

아이콘을 모두 같은 크기로 유지하는 icomoon의 접근 방식은 이러한 목적에 더 적합 해 보이지만 충분하지 않습니다.

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

:before 유사 요소를 살펴보면 fontawesome이 "이상하다"라는 것을 알 수 있습니다.

너비와 높이를 동일하게 설정하려고했지만 상황이 좋아지지 않습니다.

이것은 글꼴 자체와 관련이 있고 CSS를 통해 할 수있는 일이 없다고 생각합니다.

Dave는이 문제를 해결하는 가장 좋은 방법이 무엇인지 이해하기 위해 글꼴을 살펴보고 Icomoon에서 생성 한 글꼴을 검사해야합니다.

.otf 파일을 편집 한 풀 리퀘스트는 받아 들일 수 없지만이 문제에 대한 도움을 주시면 감사하겠습니다. 여기 누군가가 글꼴을보고 문제를 식별 할 수 있다면 매우 환영합니다

제 영어 죄송합니다. 여기도 늦었습니다 :)

@tagliala 여기에 fa-clock-o 문제를 연결해 주셔서 감사합니다. 나머지가 언급 한 것과 동일한 문제입니다.
fa-cog에는 동일한 문제가 있지만 fa-clock이나 위에서 언급 한 다른 일부와 같은 상황에서는 눈에 띄지 않습니다. 이 스레드를 계속 지켜보고 해결 방법을 찾으면보고 할 것입니다.하지만 한 번만 회전하는 글리프 자체의 작은 결함이라고 확신합니다. 그렇지 않으면 너무 작아서 육안으로 알아볼 수 없습니다.

동일한 문제를 만났는데 이에 대한 확인 된 해결책이 있습니까?

@TsuiJie 아니, 없습니다

IE10과 11의 떨림 / 흔들림 스핀 아이콘과 비슷한 문제가있었습니다.

내 문제는 IE 10/11에서 스피너가 보이는 한 스크롤바가 표시되고 숨겨 졌다는 것입니다.

내가 찾은 것은 아이콘 태그의 높이와 너비를 설정된 크기 (아이콘 자체와 같은 크기)로 설정하면 펄스가 멈춘다는 것입니다.

누군가에게 도움이되기를 바랍니다.
건배

좋아, 문제가 Font Squirrel에서 웹 폰트 형식으로 변환하는 것임을 알아 냈습니다. 일부 측정 항목을 엉망으로 만드는 것 같습니다. 내 계획:

• Font Squirrel의 새 버전으로 테스트
• 그래도 작동하지 않으면 나만의 변환 솔루션을 굴려

좋습니다. 상당한 조사 끝에 몇 가지 수정 사항을 적용했습니다.

• 회전 할 때 더 나은 시각 효과를 갖도록 fa-spinner를 업데이트했습니다.
• 웹 폰트 변환을 홈 롤링했습니다. Font Squirrel은 확실히 일을 엉망으로 만들었습니다.
• Mac에는 영향을 미치지 않지만 Windows에서 많이 사용되는 일부 글꼴 메트릭을 조정했습니다.
• 시각적 테스트 페이지 (http://fontawesome.io/test/)에 애니메이션 예제를 추가했습니다.

결과

• Retina Mac : Chrome, Safari 및 Firefox에서 완벽 함
• Non-retina Mac : Chrome, Safari 및 Firefox에서 훨씬 더 좋습니다.
• Windows 7 : IE11은 흠 잡을 데없이 보이지만 Chrome 39에는 여전히 문제가 있지만 이전보다 더 나쁘다고 생각하지 않습니다.

하나의 경고

• 몇 가지 글꼴 크기에서 모든 브라우저에서 약간의 흔들림이 있습니다 (Icomoon에도 동일한 문제가 있습니다). 기본적으로 최적화 된 해상도 (예 : 14px, 21px, 28px, 35px)의 배수 및 절반 배수로 유지하면 흔들림이 사라집니다.

결과가 예전보다 훨씬 낫기 때문에 4.3에 대해 허용 가능하다고 부르고 5.0에 대해 문제를 열어 두겠습니다.

하나 더 업데이트. 선택한 옵션이 Font Squirrel 변환에서 잘 작동하지 않는 것을 알아 냈습니다. 그래서 파일을 다시 넣었습니다. 열어 둡니다.

@davegandy , Windows에서 Firefox 및 Chrome을 사용하면 내 편이 개선되지 않습니다. IE11을 시도하지 않았습니다. 애니메이션의 단계를 사용하면 흔들림을 명확하게 볼 수 있습니다.

나는 당신이 4.x 브랜치에서 많은 것을 할 수 없다는 것을 알고 있지만 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);
}

여기까지 왔고 몇 가지 문제 해결을 찾고있는 다른 사람을 위해 :

fa-spin 및 fa-fw 함께 사용하지 마십시오.

이것은 내 문제 (그리고 내 해결책)로 밝혀졌습니다.

윰

IE11은 거의 완벽하고 IMHO는 Windows에서 최고입니다.

스피너 아이콘은 새롭고 이전보다 더 좋아질 것입니다.

모든 브라우저에서이 무거운 페이지의 하단을 살펴보세요 : http://fontawesome.io/test/

크롬과 파이어 폭스는 크기가 작을 때 정말 나쁩니다.

IE11에서는 fa-pulse로 약간의 결함이 있습니다. 스피너가 1px 위로 이동하고 다음 애니메이션 단계에서 아래로 이동하는 것과 같습니다.

IE 11 및 Chrome 40.0.2214.115 m에서 작동하지만 Firefox 35.0.1에서는 흔들립니다.

Linux 용 Firefox 36에서는 여전히 눈에 띕니다.

동영상은 50FPS로 녹화됩니다.

scaleZ(1.001) 추가하면 Linux에서 Firefox 36의 문제가 해결됩니다.

내 문제가 모든 사람의 문제와 같은지 확실하지 않은 경우 문제 # 4017과 비슷해 보였지만 여기에서 종료되고 리디렉션되었으므로 여기에 솔루션을 게시하겠습니다.

.fa-spin 클래스에 다음을 추가하면됩니다.

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

나를 위해 흔들림을 고치는 것 같았습니다.

fa-fixed @qJake 또는 align : center @JakeCooper를 피하지 마십시오 .

(fa-spin이 없으면 지터가 없습니다).

@isaksky 이 문제를 보여주는 바이올린을 제공해 주시겠습니까? 나는 아이디어가

@tagliala 여기 있습니다 :

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

Chrome 40.0.2214.115, Windows 7. 제공된 코덱에서 해당 문제를 재현 할 수 없습니다.

어떤 브라우저가 해당 출력을 제공합니까?

지금은 업무용 컴퓨터를 사용하고 있지 않지만 Windows 8의 최신 일반 Chrome이라고 생각합니다. 일반적으로 여기에서 Chrome의이 Mac에서는 재현 할 수 없습니다.하지만 110 % 또는 125 %로 확대하면 예를 들어 나타납니다. (내 버튼이 수직으로 쌓이는 문제도 있지만 이것이 의미하는 문제가 아닙니다 (ems를 사용하여 수정할 수 있다고 생각합니다).) 줌을 엉망으로 만들면 지터가 발생합니까?

이 Mac에서도 일반 (100 %) 확대 / 축소에서 발생했습니다. 확대 / 축소 및 / 또는 브라우저 탭 전환과 관련된 것 같습니다. Btw 문제는 $('#spin-pls').toggleClass("fa-spin") 에서도 발생합니다.

내일 맥으로 확인하겠습니다

여기에 톱니 바퀴 회전에 대한 해결 방법이 있습니다. 호버링하면 부드럽고 매끄 럽습니다.

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

30 도만 회전하는 키 프레임 애니메이션을 만들었습니다 (아래 rotateFa ). 그런 다음 이것을 animation: rotateFa .1s infinite; 라고 부릅니다.

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

그리고 반대로 되돌리려면

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

문제가 여전히 존재합니다.

하드웨어 가속 비활성화 모드의 경우에도 여전히 존재합니다. Firefox 36.0.4.

이 문제가 계속 문제가 열려 있기 때문에, 존재하고 우리가 모르기 때문에 어떻게 수정하는 것을하지 +1 또는

여기를보세요 : https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -65381998

예제 페이지에주의를 기울이는 것이 좋은 생각일까요? 이 문제는 내가 애니메이션 아이콘을 매우 ​​조심할만큼 충분히 크지 만 https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -71056820에 따라 레티 나 맥에서는 눈치 채지 못할 것입니다. 모든 주요 브라우저에서 테스트 한 경우에도 마찬가지입니다.

@Vusys 동의합니다. 마스터 브랜치에 대해 PR을 보내거나 작성해야 할 내용을 알려 주시면 제가 할 것입니다.

@tagliala 는 예제 아래에 다음 경고를 추가하는 pull request #

일부 플랫폼의 일부 브라우저에는 애니메이션 아이콘에 문제가있어 흔들림 현상이 발생합니다. 예제 및 가능한 해결 방법은 문제 # 671 을 참조하십시오.

@Vusys 감사합니다!

+/- 1 픽셀보다 훨씬 더 심한 흔들림이 보입니다. 회전 변환과 다른 CSS 변환 사이에 이상한 상호 작용이있어 때때로 회전 중심이 회 전자 아이콘 밖에 있습니다.

아직 내 사이트에서이 문제를 일으키는 CSS 규칙을 확인하지 않았지만 잘못된 변환 순서의 경우처럼 보입니다. 순서는 다음과 같아야합니다. 아이콘 중심을 (0,0)으로 변환 한 다음 현재 각도로 회전 한 다음 (0,0)을 가운데 아이콘이 표시 될 화면 위치 (또는 그 반대)로 변환합니다. CSS 어딘가에 다른 번역이 섞여 있습니다.

_ 업데이트 : _ 내 경우에 문제가 무엇인지 알아 냈으므로 다른 사람이이 혜택을받을 수있는 경우 여기에 답변을 게시 할 것입니다. 회전자가 'i'요소의 너비를 변경하는 CSS 규칙이 있습니다. (FA 아이콘에 사용되는 Bootstrap 요소)에 저장되었습니다. 이렇게하면 아이콘의 컨텍스트 (예 : 텍스트가 중앙에 있는지 여부에 따라)에 따라 예측할 수없는 결과가 제공됩니다.

나는 어떤 CSS 규칙을 정하지 않았다

나는 그것이 CSS 규칙이 아니며 문제가 FA 자체와 관련이 없다고 확신합니다.

여기를보세요 : http://jsfiddle.net/tagliala/g0ngLhyr/

@tagliala , CSS 규칙이나 FA와 관련이 없다면 Icomoon이 흔들림 효과가 없다는 것을 어떻게 설명합니까?

데모 : http://jsfiddle.net/cxxzh0uf/

또 다른 예는 Google에서 만든 것입니다. http://www.getmdl.io/components/index.html#loading -section / spinner

@skoub 귀하의 바이올린이 4.3.0으로 업데이트되었습니다 : http://jsfiddle.net/tagliala/cxxzh0uf/9/

여기를보세요 : http://jsfiddle.net/tagliala/g0ngLhyr/

이 바이올린에는 웹 폰트가 전혀 없으며 여전히 흔들림이 표시됩니다.

@skoub google의 구현은이 기능을 처리하는 적절한 방법 인 웹 폰트와 IMHO를 기반으로하지 않습니다.

여기에서 제 경험을 공유하고 싶습니다.

단일 아이콘 :
스택 아이콘으로 흔들리는 문제 만 있습니다. 단일 아이콘이 잘 회전하거나 깜박입니다.

누적 아이콘 :
분명히 내 사이트에서 아래 코드는 글꼴이 약간 큰 제목에서는 흔들리지 않지만 글꼴이 더 작을 때 흔들립니다. 두 경우 모두 fa-pulse가 흔들립니다.

면책 조항 : 나는이 모든 것에 매우 익숙하지만 내 사이트가 흔들리고 좋은 결과를 생성하므로 모두가 알고 싶어 할 것이라고 생각했습니다.

@isaksky 스피너의 흔들림 / 흐림은 하드웨어 가속과 관련이 있습니다.

.hide 클래스로 표시 / 숨겨지는 항목은 해당 콘텐츠가 숨겨 지도록 브라우저에 힌트를 표시 할 수 있습니다.

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

그러나 Firefox와 같은 Gecko 기반 브라우저는 적어도 나에게는 대화 상자에서 텍스트를 건너 뛰는 데 여전히 문제가 있습니다.

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

작동하지만 항상 텍스트를 과도하게 보정하고 흐리게 처리하여 Chrome에 부정적인 영향을 미칩니다. 나는 두 가지 솔루션을 내놓았다는 먼저 단지 파이어 폭스가 대상으로, 후자는 다른 가속입니다 filter: blur(0); 이 버그에서 언급하지만 내 생각에 약간의 해키 - 유사 transform: translateZ(0); - -그리고 미래에 부정적인 결과를 초래할 수 있습니다.

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

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

문제가 해결 되었습니다 . 합니다 ! 이것은 @tagliala 일반적인 솔루션으로 작동 할 수 있습니까?

@toastal 솔루션을 보여주는 jsfiddle을 제공하고 기본 fontawesome 스핀과 비교할 수 있습니까?

나는 당신이 게시 한 모든 예제를 시도하고 있으며 Firefox Aurora에서 재현 할 수 없습니다.

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

나는 데비안 Jessie를 사용하고 있으며 일부 nvidia 드라이버 문제로 인해 하드웨어 가속이없는 것 같습니다.

GLXtest 프로세스 실패 (상태 1로 종료 됨) : GLX 확장이 없습니다.
Procesador WebGL Bloqueado para tu tarjeta gráfica debido a problemas no resueltos del controlador.

또한 여기에서 재현 할 수 없습니다.
http://shb.github.io/bootstrap-loading-screen/#icon : spinner

해결 되었습니까, 아니면 하드웨어 가속을 활성화하지 않았기 때문입니까?

이 게시물 ( http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css ) 덕분에이 문제 (firefox 39 실행)에 대한 또 다른 잠재적 수정 사항을 찾았습니다.

위 의 http://jsfiddle.net/5z9om45L/

transform 속성에 "perspective (1px)"를 입력하면됩니다. 이것은 위에 링크 된 포스트에 따르면 "객체의 렌더링을 GPU로 던집니다". 나는 개인적으로 이것을 광범위하게 테스트하지 않았기 때문에 이것이 구체적으로 무엇을하는지 또는 다른 문제를 일으키는 지 알지 못하지만 지금까지는 괜찮아 보입니다. 이것은 Firefox에서 가장 큰 문제 중 하나 였기 때문에 여기에서 언급 할 것이라고 생각했습니다.

위의 JSFiddle을 수정하여 수정했습니다. http://jsfiddle.net/5z9om45L/

그것은 나를 위해 문제를 잘 해결합니다.

다음은 나침반의 흔들림을 보여주는 업데이트 된 Fiddle입니다. 두 번째 위치 버튼은 흔들림이 뚜렷한 간단한 fa-spin을 보여줍니다.

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

@spiderr는 분명히 fa-lg 라인 높이와 글꼴 크기를 다루기 때문에 흔들림 효과를 증가시킵니다. 14px 또는 배수의 글꼴 크기를 사용하십시오

@tagliala 감사합니다, 좋은 팁! fa-2x 확실히 더 좋습니다. 또한 원 주위에 이상한 아티팩트 (더러운 픽셀)가 있습니다. 여기 fa-5X의 바이올린이 있으며 큰 파란색 버튼에 더 명확하게 표시됩니다. 이것은 세부 사항이지만 누군가 나침반을 정리하면 좋을 것입니다. 내 희망은 나침반이 회전 할 때 원이 움직이고 있다는 것을 알 수없고 내부 나침반 바늘 만 있다는 것입니다. fa-5x로 화면에서 2 미터 떨어진 곳에 앉으면 멋져 보입니다 :-)

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

이것이 올바른 스레드인지 확실하지 않지만 ..
파이어 폭스에서 "fa fa-cog fa-spin"이 회전을 멈 춥니 다. 모달과 함께 ajax 호출에서 사용합니다. Safari와 Chrome에서 잘 작동하지만 어떤 이유로 Firefox가 중지됩니다. 이견있는 사람??

app / javascripts / my_file.js
$ (문서) .ready (function () {
$ ( '# search_btn'). on ( 'click', function () {
$ ( '# results'). empty ();
var myForm = $ ( '# user_search');
$ ( "# spinner_modal"). modal ( "show");
$ .ajax ({
URL : myForm.attr ( 'action'),
유형 : "POST",
데이터 : myForm.serialize (),
dataType : '텍스트',
성공 : function (html) {
$ ( "# spinner_modal"). modal ( "hide");
$ ( '# results'). append (html);
},
오류 : function (xhr, satus, err) {
$ ( "# spinner_modal"). modal ( "hide");
},
시간 초과 : 60000
});
거짓 반환;
});

_my_partial.html.erb

jonathanparrish 에 2015년 08월 11일