-
-
Notifications
You must be signed in to change notification settings - Fork 2k
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
Pixellated emojis on Firefox on Windows #16588
Comments
Please consider using nanoemoji to generate COLR fonts https://github.com/googlefonts/nanoemoji/ |
@Salamandar, I don't think I can reproduce this issue... Here's a screenshot from Firefox 89 on Windows 10 20H2: We already have COLR fonts, and we specifically use them on Firefox. Is this a self-hosted deployment? Please send debug logs, and compare with https://develop.element.io's behaviour. |
@jryans You should try on Firefox stable, aka 87.0. I'm on app.element.io. But the issue is also present on develop.element.io. I had nightly installed, so I tried 89.0a1 on Windows 10 Pro 20H2. Same issue. In the console, I found :
|
@Salamandar Can you send a bit more info about your screen and pixel ratio? What do you get for these values in the console?
|
@jryans here it is !
|
Here is the full log after a full reload of Element :
|
Thanks, so this seems to say you have a low-DPI display. @Salamandar, looking at the comparison screenshots again, the only difference I am noticing is that Firefox on Windows seems to cut off the top and bottom lines, so we should try to fix that... Is there anything else that is different here? |
Well it's not a low-DPI, just a 24'' 1080p display. Also, it's not just a pixel issue, the font is just not the same. Look at the mouth's shape here : (Linux is up, Windows down). … Hey ! I just discovered something weird ! When I use the Firefox Inspector, select an emoji and change its display size, it begins being pixellized at 2.04rem ! |
@Salamandar Are you still seeing this issue with the latest browser versions? |
Hey @kittykat, i tried again on firefox 92 on Windows, the issue is still present. The emojis are fine on the electron app. I also just installed firefox nightly 94, the issue is still present. |
I'm afraid I don't yet fully understand the problem, so perhaps someone may need to investigate further first. It appears that at least for this user, when using Firefox on Windows with DPI 1 display, the following problems occur:
|
I wonder if it's browser or application zoom / font size related...? @Salamandar, are you using either of following?
|
Hey @jryans, I've menaged to reproduce this on Windows 11 Home 21H2 by:
I took a screenshot in two different browsers: As you can see, they're not the same. If we place two emojis next to each other and zoom in really hard, the problem seems to be that Firefox doesn't render some of the low contrast pixels, making the head look cut off and mouth just look different: (if you can't see what I'm describing by zooming in the browser, try downloading the picture and zooming in) I hope this helps a bit. If there's any additinal info I can give you, just let me know. |
I believe the Windows issue will be some variant of #22184 For the other issue, I'm presuming this is fixed due to lack of response. If you're still seeing this, please open a new issue. |
Description
The emojis are badly pixellated on Firefox on Windows.
It's OK on Firefox on Linux, it's OK on Edge.
The issue was also present for the round buttons (go to first unread message, etc) but it recently became better.
Here is how the emoji panel looks like on Firefox 86 on Windows :
Here is how it looks like on Edge :
The text was updated successfully, but these errors were encountered: