9

The badges in communities list (aka the bling) seem to be misaligned vertically on hover.

enter image description here

For reference: a couple of months ago a bug was fixed where the badges were cut off in the communities list. Last year badges were also misaligned but down instead of up.

Using Firefox 92.0.1 (64-bit) on Windows 10 Pro. rev 2021.10.4.40368

6
+100

This not necessarily a bug with the badges themselves - they are perfectly aligned on the font baseline (you will see they are if you measure them against the font-size of the element with the reputation count), just not the baseline the eye is expecting them to be aligned to.

The font-size of the badge count breakdowns is slightly smaller (12px) than the one for the reputation count (13px), so the badges appear to be misaligned by exactly 1 pixel.


If we inspect CSS, the alignment of badges in the primary stylesheet (taking bronze badges as an example) is set as follows:

.badge3 {
    background-position: -62px -398px;
}

See the second value of the background-position rule? It is responsible for the slight vertical "misalignment" as it is a shorthand for the background-position-y property. The reason for it being setup this way is that the dots are displayed from a sprite sheet set in the corresponding background-image rule.

Here is the sprite sheet with the position of the badge icons highlighted:

sprite sheet

So, what can be done to address this?

Approach #1: tweaking the alignment

Given that the badge image is just a part of the sprite sheet, changing background-position-y slightly to -397px seemingly gives us the desired result when zoomed in:

preview of the fix with background-position-y

But once we zoom out, we find out that the badge is, unfortunately, too low visually:

preview of the issue with the fix when zoomed out

Approach #2: using radial gradients

Another solution is to create badges using radial-gradient CSS function (since, well, they are circles) and then center the background:

.badge3 {
    background-position: 50% 80%;
    background-image: radial-gradient(var(--bronze) 0px, var(--bronze) 30%, transparent 34%);
    background-size: 12px 12px;
}

Note that the color stops intentionally avoid "hard" stops due to this old and, apparently, still unresolved bug in Chromium's rendering. Unfortunately, the solution suffers from shape changes on zoom out:

preview of the shape changing to rotated rectangle on 100% zoom

Approach #3: using border-radius

The third approach is the one taken by Stacks for the badges component perusing background-color and border-radius rules:

.badge3 {
    background-color: var(--bronze);
    border-radius: 100%;
}

This, however, leads to a vertically elongated ellipsis being rendered as the context differs slightly, so we also have to make sure the background is clipped to a square box with background-clip set to content-box + some padding:

.badge3 {
    background-color: var(--bronze);
    border-radius: 100%;
    border-radius: 100%;
    background-clip: content-box;
    padding: 4px 0px;
}

And here is how it would look like:

preview of the fix using border-radius

Approach #4: clip-path

Finally, one can use clip-path with background-color to achieve the same result by drawing a basic shape at a cost of IE support:

.badge3 {
    background-color: var(--bronze);
    clip-path: circle(3px at 50% 7px);
    background-image: none;
}

which results in:

preview of the fix using clip-path

Approach #5: adjust font-size

Of course, you can always just increase the font-size instead if that's your cup of tea:

.badgecount {
    font-size: 13px;
    /* the rest of the properties */
}

resulting in:

preview of the font-size change


In any case, give it 6 to 8 weeks to be fixed and use what works best for you in the meantime.

7
  • No, it is nothing of this all. If you inspect closely you'll see that the two elements, the hover with the badges, and the site names, are not at the same height.
    – Luuklag
    Oct 6 at 8:31
  • 1
    @Luuklag I was talking about the visual appearance - the size of the boxes is, indeed, different (14px - badge, 15.667px - badge count). The visual discrepancy bad_coder describes, however, is related to the difference between font sizes of the reputation count and badge count elements - the badges thus appear slightly misaligned. Oct 6 at 8:37
  • 1
    as for the list of communities positioned on the Y axis lower than the hover element - yes, it is. However, it does not affect the badge positioning relative to the badge count (especially given that the background is set via background-image with a sprite sheet shifted on both X and Y axis). Oct 6 at 9:19
  • @OlegValter I'm under the impression this is now fixed?
    – bad_coder
    Oct 12 at 0:45
  • @bad_coder maybe? :) Let me check Oct 12 at 0:48
  • 1
    @OlegValter would you believe it's working on SO using dark theme and not working on MSE using normal theme... :O
    – bad_coder
    Oct 12 at 0:50
  • 1
    @bad_coder I would believe it :) Seems like the issue is definitely not fixed on MSE but I can believe that it is ok on SO given that SO uses Stacks, and they used the approach described in #3 and thus avoid the issue altogether Oct 12 at 0:52

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .