search

primer / css

The CSS design system that powers GitHub
https://primer.style/css
MIT License
12.54k stars 1.2k forks source link

Octicon alignment issues in Chrome on Windows #899

Closed emplums closed 3 years ago

emplums commented 5 years ago

Describe the bug From original ticket: PR timeline icons are slightly misaligned on Windows: image

Original issue: https://github.com/github/github/issues/119113

From @simurai:

I can reproduce this on my old Windows laptop. Played a bit around in the DevTools and it might be related to how Chrome on Windows renders vertical-align? Octicons have a default of vertical-align: text-top;. Primer overrides it to vertical-align: text-bottom;. In Chrome on Windows it looks "most centered" when changing it vertical-align: sub;. Interestingly in Chrome on macOS there seems to be no difference between vertical-align: > text-bottom; and vertical-align: sub;. So a possible fix might be to switch to vertical-align: sub;. But we would need a bit more testing in other browsers.

shawnbot commented 4 years ago

@jonrohan do you know if this issue is fixed in your TimelineItem refactor?

github-actions[bot] commented 3 years ago

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.