Blurry organization icons in the controls container

[evinr]

Describe the bug
Icons in the control container appear out of focus and blurry.

To Reproduce
Join an organization that has a custom organization icon. Look at the icons on the left of the screen that allow you to navigate between different organizations that you belong to. The user reports feelings of vision failing? The users eyes are not the issue, there is a pixel rounding issue at 35px.

Expected behavior
The icon should always render crisp and clear. There are two fixes here. Change the width to 36px or add image-rendering: -webkit-optimize-contrast css.

Screenshots

Desktop (please complete the following information):

• Operating System:
  Ubuntu 20.04 x64
• Zulip Desktop Version:
  5.9.1

Additional context

[evinr]

@zulipbot claim

[zulipbot]

Hello @evinr!

Thanks for your interest in Zulip! You have attempted to claim an issue without the labels "help wanted", "good first issue". Since you're a new contributor, you can only claim and submit pull requests for issues with the help wanted or good first issue labels.

If this is your first time here, we recommend reading our guide for new contributors before getting started.

[evinr]

#1203

[evinr]

Bumping this. Any ideas on how this fix can be accepted?

[just-max]

I have the same issue. Do emojis also look blurry? Also, do you have hardware rendering turned on? In my case, the answer to both is yes. I've also tried the image-rendering fix as custom CSS.

Unfortunately, the change with image-rendering: -webkit-optimize-contrast; doesn't fully fix the issue. The root cause is apparently a "problem" in Chromium's image scaling algorithms when hardware acceleration is enabled.

For reference, I set my profile picture to this image:

Here is that same profile picture with three different settings:

• (1) Chromium (desktop app), no fix (unacceptable, current state)
  
• (2) Chromium (desktop app), with image-rendering-fix (acceptable, but not great)
  
• (3) Firefox (best)
  

The image-rendering fix is significantly better than without, but not great. In Firefox, small details remain legible (compare the small text at the bottom of the image).

Two other comparisons, same order as above

The original Chromium issue seems to be https://bugs.chromium.org/p/chromium/issues/detail?id=562162
As some point, that was closed and it became https://bugs.chromium.org/p/chromium/issues/detail?id=1267600
(Possibly related: https://bugs.chromium.org/p/chromium/issues/detail?id=472864)

Unfortunately, there doesn't even seem to be consensus that this is an issue, instead one comment considers it as a "tradeoff made in choosing a resampling algorithm." Although, here I'm not sure if the Chromium issue really relates to the images being as blurry as in (1), or if they're currently closer to (2).

[nicholsk18]

For my organization making these adjustments for main.css file worked great.
For .tab .server-tab I changed the height to be auto, and set the padding to 0.
For .tab .server-icons I changed the width to be 100%

Now since not everyone uploads same size images, you could possibly add a max-height to .tab .server-tab selector to limit any issues with longer images. Here is an example of full css I have.

.tab .server-tab {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 5px;
    z-index: 11;
    line-height: 31px;
    color: rgb(238 238 238 / 100%);
    text-align: center;
    overflow: hidden;
    opacity: 0.6;
    padding: 0;
    max-height: 55px;
}
.tab .server-icons {
    width: 100%;
    vertical-align: top;
    border-radius: 4px;
}

Hope this helps!

[just-max]

This also affects profile pictures and emojis though, at least in my case.

[nicholsk18]

@just-max for me personally image-rendering: -webkit-optimize-contrast; works great. After doing a bit of messing around with CSS I also noticed changing the width of profile photos and emojis to make them clear as well.

.rendered_markdown .emoji {
    height: 21px;
    width: 24px;
}
.inline_profile_picture {
    display: inline-block;
    width: 36px;
    height: 36px;
    margin-right: 11px;
    vertical-align: top;
    border-radius: 4px;
    overflow: hidden;
}

Might not be the ultimate answer, but should be better than having blurry images.