Animated "in progress" icon is misaligned

Screenshot from 2019-09-26 21-35-18.png

In case it’s not clear from the above screenshot: yellow dot in animated “build ongoing” icon is not in the centre. It’s trivial but quite annoying and seems unpolished. It happens on:

  • Firefox 69, Fedora 30
  • Chrome 79, Fedora 30
  • Firefox 68, Android 8.1 (it’s less noticeable than on Linux, but the issue is there - rotate your screen to confirm)
  • Chrome 77, Android 8.1 (it’s even less noticeable, but still there)

Is there some better way to report such design issues to GitHub Actions, or will this thread be enough? :slight_smile:

1 Like

Are you still seeing this? We had an issue with some JS/CSS earlier.

1 Like

Yes, I do - just tested on Firefox Nightly with cleaned-up cache and the issue is still visible.

I inspected DOM and think it’s happening because you try to correlate position of two different svgs: js-check-step-icon animation and  octicon-primitive-dot while using mix of unitless values and pixel-values.

Position of animation depends on body’s line-height (thus will be affected by font rendering) and then it’s moved around by setting margin using pixel units.

My suggestion for fix would be to combine primitive-dot and animation into a single svg element - it would prevent any future css changes from affecting the animation. Combined elements might also take fewer bytes in the document :slight_smile: