Min-width css tag behavior inconsistent

Steps to reproduce:

Visit https://github.com and visit a repository from Orion. While doing the same on another browser of your choice, notice how the buttons are circles with around a width of 21.9-22 px on Firefox, exactly 20 px on Safari, but 34 px on Orion; The height is exactly 20 px on all three.

Expected behavior:

The expectancy is that the CSS matches up on all the browsers and the difference is minimal to a point where it isn't noticeable.

Orion, OS version; hardware type:

• Version 0.99.110-beta (WebKit 613.1.12)
• MacOS 12.0.1

Image/Video:

Before disabling min-width:

After disabling min-width

Upon further inspection, this website suffers from this issue as well. But it may not be the exactly as I described it.

The overlap in this case occurs from the same issue. The property is set like so: min-width: 16px; while the actual width is 24px. Now, there is something that I should note that I didn't see at first, but that is the padding. If the width of the button was 20, that would make sense, as the left and right padding is set to four, but instead it is 24 which means that the actual left and right padding is 8 if the issue is with that and not with the min-width. What disproves my theory with it being a padding thing (if I have my facts straight) is that the padding is normal when adding enough characters to affect the size. As an example, I see the correct amount of space in between the span content and the border when I change the number to 100.

(Ignore the overlap for this as it is not an issue, just a side effect from having 100 notifications apparently LOL)

With this all in mind, I hope that the information has assisted you in finding the root cause of this.