12

It seems the bottom of badges are cut off in the communities list of the user profile when you hover over it. See the screenshot

enter image description here

There have been a few posts similar to this years ago, but this was working for me just a few days ago and I don't think I've made any system changes in the meanwhile.

Using Firefox 88.0.1 (64-bit) on Windows 10 Pro.

8
  • 5
    .profile-communities--rep-badges .badge1 defines a height of 8px while the .profile-communities--rep-badges .badge1:before sets the content to \25cf (dot char) to emulate the badge circle. The recent font change lead to those not fitting anymore. An inherited overflow-hidden on the former ensured the circles got truncated. Give it 6 to 8 weeks – Oleg Valter May 26 at 11:44
  • 1
    @OlegValter thank you for explaining that, so it really is a bug. – bad_coder May 26 at 11:47
  • 1
    yup, looks like one - I will post a better response when I figure out the steps for fixing it in the meantime. For now, it seems like removing the height: 8px is enough to fix the issue. – Oleg Valter May 26 at 11:49
  • ^ actually, scrap the "enough" part - leads to issues on zoom levels > 100%. Also needs line-height: 1; removed :) – Oleg Valter May 26 at 11:52
  • At least we now know you're active on Stack Overflow ... – rene May 26 at 11:55
  • 1
    @rene they found me, AAARRRGGHHH – bad_coder May 26 at 11:58
  • Perhaps related: the bottom part of letters like p, q, y are also chopped off on Mathematics. Report on Mathematics Meta: Some names on the main page of math.SE and meta doesn't display correctly because it seems that there's not enough space – The Amplitwist Jun 11 at 7:31
  • @TheAmplitwist I think the 2 posts are not related because the problems happen on different sections of the site, in this case it's in the user profile community-list and in the case of the other post the problem is on the main page listing. – bad_coder Jun 11 at 7:55
4

This issue has been fixed and is now live across the network. Additionally, I've gone through the codebase to ensure that this issue doesn't affect any other badge "bling"1 instances.

The issue here was caused by exactly what @OlegValter proposed here (nice detective work!). In a nutshell, it is because those dots used the "bullet" character () instead of the spritesheet images we use literally everywhere else. Why? I dug into the history a bit and it looks like a dev got a little enthusiastic during a legacy style refactor some time ago. Dropping these overrides and letting it fall back to the normal styles fixed the issue.

1 Yes, some of us on the design system team talked this over a bit, and yes, that's what we're calling those little gold/silver/bronze dots (for now anyways) :P

7

Mine is even worse, using FF 78.4.0 ESR on MacOS Big Sur (11.3.1):

enter image description here

Mine are cropped on both the X and Y axes, whilst yours are only cropped at the bottom half.

Changing the font size from 1.15384615rem to 10px produced circles of acceptable size. It is set in: .profile-communities--rep-badges .badge1::before, .profile-communities--rep-badges .badge2::before, .profile-communities--rep-badges .badge3::before Although this makes that they are no longer centred in their square.
enter image description here

1
  • 2
    Now you're just showing off your badge collection :D (But the squares are an interesting addition to the thread, good post.) – bad_coder May 26 at 12:04
5

This issue seems to be related to the recent font change. The following rulesets are relevant to the problem (these are not the complete rulesets, just the relevant parts):

.profile-communities--rep-badges .badge1 {
    height: 8px;
    width: 8px !important;
}

.profile-communities--rep-badges .badge1:before {
    content: "\25cf";
    line-height: 1;
}

Note that the "badges" are actually the so-called "black circle" chars (\25cf or ●). The font change caused them to become bigger than originally intended, resulting in them overflowing the element (<span class="badge1">) boundaries.

See how the badges look like with font-family: Times, and it will become clear the font is at the heart of the issue:

badges with font-family rule set to 'Times'

as opposed to now (due to the nature of the change, the truncation might look different for you depending on the OS used):

badges without the font-family change

And what is the value for the overflow rule of the element? As expected, hidden, therefore the badges get truncated on the bottom and/or on the right depending on the font. What's more, the line-height: 1 contributes to the problem since it depends on the font size.

So, what one has to do to fix them in the 6 to 8 weeks span it takes to fix this? Two options: either (1) increase both height and width to at least 10px (you mileage may vary) or (2) remove the height and line-height rules. Although the width must be increased either way in case the badges are truncated on the right.

The badges after applying the fixes:

dimensions solution screnshot

If you do not want to fiddle with devtools and local overrides, here is a quick snippet for fixing those:

((_w, d) => {
    const style = d.createElement("style");
    d.head.append(style);
    const { sheet } = style;
    if(!sheet) return;

    sheet.insertRule(`
.profile-communities--rep-badges .badge1,
.profile-communities--rep-badges .badge2,
.profile-communities--rep-badges .badge3 {
    height: 10px;
    width: 10px !important;
}`);

})(window, document);
9
  • 1
    For me the width needs to be at least 14 to fit the entire circle. But then again there is not enough space on the line to include the entire circle if I set the height to 14 as well, it just crops the top off then. Setting the line height to 1.7 fixes that. I think the solution would be to just downsize the font. – Luuklag May 26 at 13:41
  • 1
    @Luuklag - 14? Gosh, the font is thick in your case. Maybe setting a smaller font-size on the .profile-communities--rep-badges .badge1:before {} will help? Oh, I see you already thought of that :) Sorry, I was replying to the previous version of the comment. – Oleg Valter May 26 at 13:44
  • 1
    Yes, setting the font size to small fixes it with the width and height set at 14, but then the font is still ridiculously large. – Luuklag May 26 at 13:48
  • @Luuklag - I wish I had a way to test the same setup as yours :( The circles in image in your answer look huge indeed... Is using absolute sizing in pixels acceptable for you? I think the small value does not give enough reduction in size. – Oleg Valter May 26 at 13:55
  • I'm not much of a CSS connoisseur, the only thing that works when I enter it is small. I tried 5 and 5px but none of those change the size of the circles – Luuklag May 26 at 13:58
  • 1
    Ah I found another place where it is set to font-size: 1.15384615rem; It is set in: .profile-communities--rep-badges .badge1::before, .profile-communities--rep-badges .badge2::before, .profile-communities--rep-badges .badge3::before Setting that size to 10px produces circles of acceptable shape, although that makes that they are no longer centred in their square. – Luuklag May 26 at 14:00
  • @Luuklag - yeah, that's the rule I referenced in the post - just omitted the irrelevant parts for readability, but it seems like I need to put those back to avoid confusion. Btw, do we have a win for your use case as well? :) – Oleg Valter May 26 at 14:06
  • 1
    I edited my answer above. It has some placement issues, but the size appears to be about right. – Luuklag May 26 at 14:07
  • @Luuklag - yup, just saw the edit. I think with the size fix applied, one of the two fixes proposed should be enough to fix the positioning - from the screenshot it looks like now they are of appx. the same size as in my case (although maybe they will benefit from reduction to 8px to fit the current box size) – Oleg Valter May 26 at 14:16

You must log in to answer this question.

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