-
-
Notifications
You must be signed in to change notification settings - Fork 416
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Blurry organization icons in the controls container #1202
Comments
@zulipbot claim |
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. |
Bumping this. Any ideas on how this fix can be accepted? |
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 Unfortunately, the change with For reference, I set my profile picture to this image: Here is that same profile picture with three different settings:
The The original Chromium issue seems to be https://bugs.chromium.org/p/chromium/issues/detail?id=562162 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). |
For my organization making these adjustments for main.css file worked great. Now since not everyone uploads same size images, you could possibly add a max-height to .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! |
This also affects profile pictures and emojis though, at least in my case. |
@just-max for me personally .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. |
Describe the bug
![Screenshot from 2022-04-15 13-17-24](https://user-images.githubusercontent.com/1620062/163627957-37b4f302-c61b-499d-bb3f-e1adcb0f0601.png)
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):
Ubuntu 20.04 x64
5.9.1
Additional context
The text was updated successfully, but these errors were encountered: