Cause: Due to a combination of poor font anti-aliasing and a font-size and line-height that didn't perfectly match the grid on which the icons were designed, font-based icons with a spinning effect applied to them jitter or wobble.
Consequence: Spinning icons distract the eye.
Fix: Precisely size icons that spin to the exact size and line-height of the grid on which the icons were based.
Result: Icons with the spinning effect no longer jitter or wobble.
Created attachment 1188912[details]
Gittering arrow animation
Description of problem:
The spinning arrow animation used to portray the running state in the web console gitters distractingly in pod view.
Version-Release number of selected component (if applicable):
Firefox 47.0
How reproducible:
100%
Steps to Reproduce:
1. Create a new project with a running pod.
2. Open the pod details.
3.
Actual results:
See video.
Expected results:
Smooth animation.
Additional info:
Does it only happen on that page for you or everywhere we animate that icon?
Comment 2Jessica Forrester
2016-11-22 21:27:00 UTC
This is a problem with font-awesome's fa-spin at font-sizes that aren't multiples of 14px. https://github.com/FortAwesome/Font-Awesome/issues/671
At least on the page in the screen capture its using a 13px font for that icon, we might be able to workaround the known issue by bumping up the font-size for our <status-icon> directive
In addition to the wobble I think you are also seeing the poor font anti-aliasing that happens on firefox on linux.
Since the problem described in this bug report should be
resolved in a recent advisory, it has been closed with a
resolution of ERRATA.
For information on the advisory, and where to find the updated
files, follow the link below.
If the solution does not work for you, open a new bug report.
https://access.redhat.com/errata/RHBA-2017:0884
Created attachment 1188912 [details] Gittering arrow animation Description of problem: The spinning arrow animation used to portray the running state in the web console gitters distractingly in pod view. Version-Release number of selected component (if applicable): Firefox 47.0 How reproducible: 100% Steps to Reproduce: 1. Create a new project with a running pod. 2. Open the pod details. 3. Actual results: See video. Expected results: Smooth animation. Additional info: