Bug 1365301 - Jitter in web console spinning arrow animation
Summary: Jitter in web console spinning arrow animation
Keywords:
Status: CLOSED ERRATA
Alias: None
Product: OpenShift Container Platform
Classification: Red Hat
Component: Management Console
Version: 3.2.1
Hardware: Unspecified
OS: Unspecified
medium
low
Target Milestone: ---
: ---
Assignee: Robb Hamilton
QA Contact: Yadan Pei
URL:
Whiteboard:
Depends On:
Blocks:
TreeView+ depends on / blocked
 
Reported: 2016-08-08 20:56 UTC by Justin Pierce
Modified: 2017-07-24 14:11 UTC (History)
8 users (show)

Fixed In Version:
Doc Type: Bug Fix
Doc Text:
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.
Clone Of:
Environment:
Last Closed: 2017-04-12 19:06:12 UTC
Target Upstream Version:
Embargoed:


Attachments (Terms of Use)
Gittering arrow animation (130.47 KB, application/octet-stream)
2016-08-08 20:56 UTC, Justin Pierce
no flags Details


Links
System ID Private Priority Status Summary Last Updated
Red Hat Product Errata RHBA-2017:0884 0 normal SHIPPED_LIVE Red Hat OpenShift Container Platform 3.5 RPM Release Advisory 2017-04-12 22:50:07 UTC

Description Justin Pierce 2016-08-08 20:56:09 UTC
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:

Comment 1 Samuel Padgett 2016-11-22 21:03:02 UTC
Does it only happen on that page for you or everywhere we animate that icon?

Comment 2 Jessica 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.

Comment 3 Robb Hamilton 2016-12-09 16:10:56 UTC
PR to fix:  https://github.com/openshift/origin-web-console/pull/1016

Comment 4 Troy Dawson 2017-01-20 23:26:34 UTC
This has been merged into ocp and is in OCP v3.5.0.7 or newer.

Comment 5 XiaochuanWang 2017-01-23 07:38:22 UTC
Not reproduced, verified on latest openshift v3.5.0.7.

Comment 7 errata-xmlrpc 2017-04-12 19:06:12 UTC
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


Note You need to log in before you can comment on or make changes to this bug.