Skip to content
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

Closed
Salamandar opened this issue Mar 3, 2021 · 14 comments
Closed

Pixellated emojis on Firefox on Windows #16588

Salamandar opened this issue Mar 3, 2021 · 14 comments
Labels
A-Emoji O-Uncommon Most users are unlikely to come across this or unexpected workflow S-Tolerable Low/no impact on users T-Defect X-Cannot-Reproduce X-Needs-Info This issue is blocked awaiting information from the reporter Z-Platform-Specific

Comments

@Salamandar
Copy link
Contributor

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 :

image

Here is how it looks like on Edge :

image

@yisibl
Copy link

yisibl commented Mar 21, 2021

Please consider using nanoemoji to generate COLR fonts https://github.com/googlefonts/nanoemoji/

@jryans
Copy link
Collaborator

jryans commented Mar 29, 2021

@Salamandar, I don't think I can reproduce this issue... Here's a screenshot from Firefox 89 on Windows 10 20H2:

image

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 jryans added X-Cannot-Reproduce X-Needs-Info This issue is blocked awaiting information from the reporter labels Mar 29, 2021
@Salamandar
Copy link
Contributor Author

Salamandar commented Mar 30, 2021

@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.
This is a clean browser install, no preferences changed or add-ons installed.

In the console, I found : 

Checking for COLR support KeyboardShortcuts.tsx:280:25
Browser is Firefox - assuming COLR is supported

@jryans
Copy link
Collaborator

jryans commented Mar 30, 2021

@Salamandar Can you send a bit more info about your screen and pixel ratio? What do you get for these values in the console?

> screen
Screen { availWidth: 1680, availHeight: 1027, width: 1680, height: 1050, colorDepth: 24, pixelDepth: 24, top: 0, left: 0, availTop: 23, availLeft: 0 }
> devicePixelRatio
2

@Salamandar
Copy link
Contributor Author

@jryans here it is !

> screen
Screen { availWidth: 1920, availHeight: 1040, width: 1920, height: 1080, colorDepth: 24, pixelDepth: 24, top: 0, left: 0, availTop: 0, availLeft: 0 }

> devicePixelRatio
1

@Salamandar
Copy link
Contributor Author

Salamandar commented Mar 31, 2021

Here is the full log after a full reload of Element :

/sync error ConnectionError: request failed: CORS request rejected: https://matrix-client.matrix.org/_matrix/client/r0/sync?filt?15025_804692172_686273230_2184865_237743021_880571634_184720 vendors~init.js:2:1252553
Error: request failed: CORS request rejected: https://matrix-client.matrix.org/_matrix/client/r0/sync?filt?15025_804692172_686273230_2184865_237743021_880571634_184720
    v https://app.element.io/bundles/6421c751c3aa2dc359ed/vendors~init.js:2
    _ https://app.element.io/bundles/6421c751c3aa2dc359ed/vendors~init.js:2
    g https://app.element.io/bundles/6421c751c3aa2dc359ed/vendors~init.js:2
    u https://app.element.io/bundles/6421c751c3aa2dc359ed/vendors~init.js:2
    onreadystatechange https://app.element.io/bundles/6421c751c3aa2dc359ed/vendors~init.js:2
vendors~init.js:2:1252553
Number of consecutive failed sync requests: 1 vendors~init.js:2:1252553
Starting keep-alive vendors~init.js:2:1252553
MatrixClient sync state => RECONNECTING vendors~init.js:2:1252553
Initialised rageshake. KeyboardShortcuts.tsx:280:25
To fix line numbers in Chrome: Meatball menu ? Settings ? Blackboxing ? Add /rageshake\.js$ KeyboardShortcuts.tsx:280:25
Using Web platform KeyboardShortcuts.tsx:280:25
XHRGEThttps://app.element.io/config.app.element.io.json?cachebuster=1617180901247
[HTTP/2 404 Not Found 70ms]

Configuring rageshake persistence... KeyboardShortcuts.tsx:280:25
Loading skin... KeyboardShortcuts.tsx:280:25
onmozfullscreenchange est obsol?te. velocity.min.js:6:36577
onmozfullscreenerror est obsol?te. velocity.min.js:6:36577
Skin loaded! KeyboardShortcuts.tsx:280:25
Using WebAssembly Olm KeyboardShortcuts.tsx:280:25
Content Security Policy: Les param?tres de la page ont emp?ch? le chargement d?une ressource ? blob:https://app.element.io/9a805b8b-99b5-4053-9306-3911fdae52c3 (? worker-src ?).
set language to fr KeyboardShortcuts.tsx:280:25
Vector starting at https://app.element.io/ KeyboardShortcuts.tsx:280:25
Verifying homeserver configuration KeyboardShortcuts.tsx:280:25
Config uses a default_server_name - doing .well-known lookup KeyboardShortcuts.tsx:280:25
DEPRECATED CONFIG OPTION: In the future, default_server_name will not be accepted. Please use default_server_config instead. KeyboardShortcuts.tsx:280:25
Erreur d?analyse XML : mal form?
Emplacement : https://matrix.org/.well-known/matrix/client
Num?ro de ligne 1, Colonne 1 : client:1:1
Using homeserver config: 
Object { hsUrl: "https://matrix-client.matrix.org", hsName: "matrix.org", hsNameIsDifferent: true, isUrl: "https://vector.im", isDefault: true, isNameResolvable: true, warning: null }
KeyboardShortcuts.tsx:280:25
Updating SdkConfig with validated discovery information KeyboardShortcuts.tsx:280:25
No pickle key available KeyboardShortcuts.tsx:280:25
Restoring session for @Salamandar:matrix.org KeyboardShortcuts.tsx:280:25
setLoggedIn: mxid: @Salamandar:matrix.org deviceId: TBJOQEPCFH guest: false hs: https://matrix-client.matrix.org/ softLogout: false  freshLogin: false KeyboardShortcuts.tsx:280:25
StorageManager: Checking storage consistency KeyboardShortcuts.tsx:280:25
StorageManager: Local storage supported? true KeyboardShortcuts.tsx:280:25
StorageManager: IndexedDB supported? true KeyboardShortcuts.tsx:280:25
StorageManager: Local storage contains data? true KeyboardShortcuts.tsx:280:25
StorageManager: Crypto initialised? true KeyboardShortcuts.tsx:280:25
StorageManager: Sync store using IndexedDB contains data? true KeyboardShortcuts.tsx:280:25
StorageManager: Crypto store using IndexedDB contains data? true KeyboardShortcuts.tsx:280:25
StorageManager: Storage consistency checks passed KeyboardShortcuts.tsx:280:25
Session persisted for @Salamandar:matrix.org KeyboardShortcuts.tsx:280:25
Lifecycle: Starting MatrixClient KeyboardShortcuts.tsx:280:25
EventIndex: Platform doesn't support event indexing, not initializing. KeyboardShortcuts.tsx:280:25
IndexedDBStore.startup: connecting to backend KeyboardShortcuts.tsx:280:25
MatrixClientPeg: waiting for MatrixClient store to initialise KeyboardShortcuts.tsx:280:25
Switching to room id !XXXXXXXXXXX:matrix.org at event undefined KeyboardShortcuts.tsx:280:25
StorageManager: Persistent? true KeyboardShortcuts.tsx:280:25
IndexedDB worker is ready KeyboardShortcuts.tsx:280:25
LocalIndexedDBStoreBackend.connect: connecting... indexeddb-worker.js:1:1171
LocalIndexedDBStoreBackend.connect: awaiting connection... indexeddb-worker.js:1:1171
LocalIndexedDBStoreBackend.connect: connected indexeddb-worker.js:1:1171
LocalIndexedDBStoreBackend: loading account data... indexeddb-worker.js:1:1171
LocalIndexedDBStoreBackend: loading sync data... indexeddb-worker.js:1:1171
LocalIndexedDBStoreBackend: loaded account data indexeddb-worker.js:1:1171
LocalIndexedDBStoreBackend: loaded sync data indexeddb-worker.js:1:1171
LocalIndexedDBStoreBackend: loaded initial data indexeddb-worker.js:1:1171
IndexedDBStore.startup: loading presence events KeyboardShortcuts.tsx:280:25
IndexedDBStore.startup: processing presence events KeyboardShortcuts.tsx:280:25
Crypto: Starting up crypto store... KeyboardShortcuts.tsx:280:25
connecting to indexeddb matrix-js-sdk:crypto KeyboardShortcuts.tsx:280:25
connected to indexeddb matrix-js-sdk:crypto KeyboardShortcuts.tsx:280:25
Crypto: initialising roomlist... KeyboardShortcuts.tsx:280:25
Crypto: initialising crypto object... KeyboardShortcuts.tsx:280:25
Crypto: initialising Olm... KeyboardShortcuts.tsx:280:25
Crypto: initialising Olm device... KeyboardShortcuts.tsx:280:25
Crypto: loading device list... KeyboardShortcuts.tsx:280:25
Crypto: fetching own devices... KeyboardShortcuts.tsx:280:25
Loaded cross-signing public keys from crypto store KeyboardShortcuts.tsx:280:25
Crypto: checking for key backup... KeyboardShortcuts.tsx:280:25
Checking key backup status... KeyboardShortcuts.tsx:280:25
MatrixClientPeg: really starting MatrixClient KeyboardShortcuts.tsx:280:25
Fetching new TURN credentials KeyboardShortcuts.tsx:280:25
Getting saved sync token... KeyboardShortcuts.tsx:280:25
Getting push rules... KeyboardShortcuts.tsx:280:25
MatrixClientPeg: MatrixClient started KeyboardShortcuts.tsx:280:25
Attempting to get Jitsi conference information from homeserver KeyboardShortcuts.tsx:280:25
Jitsi conference domain: jitsi.riot.im KeyboardShortcuts.tsx:280:25
Backup public key l8gE0kueFKyLnsV3+zkaSnke+ZoeZQIcgR5X5fKWXjs is trusted locally KeyboardShortcuts.tsx:280:25
Ignoring signature from unknown key ed25519:WILMPPWDKA KeyboardShortcuts.tsx:280:25
Ignoring signature from unknown key ed25519:VURBRLSTAK KeyboardShortcuts.tsx:280:25
Ignoring signature from unknown key ed25519:VJUZDGJSVB KeyboardShortcuts.tsx:280:25
Ignoring signature from unknown key ed25519:KYTTKOUHUW KeyboardShortcuts.tsx:280:25
Ignoring signature from unknown key ed25519:PHASVEZXTX KeyboardShortcuts.tsx:280:25
Ignoring signature from unknown key ed25519:UGANRGQSCC KeyboardShortcuts.tsx:280:25
Ignoring signature from unknown key ed25519:TAMMGRRGLC KeyboardShortcuts.tsx:280:25
Ignoring signature from unknown key ed25519:AYWXQVOVCX KeyboardShortcuts.tsx:280:25
Ignoring signature from unknown key ed25519:GTRKXLVXTK KeyboardShortcuts.tsx:280:25
Ignoring signature from unknown key ed25519:SHRGLKQYPE KeyboardShortcuts.tsx:280:25
Ignoring signature from unknown key ed25519:TJUOFQCYJF KeyboardShortcuts.tsx:280:25
Found usable key backup v5: enabling key backups KeyboardShortcuts.tsx:280:25
Got saved sync token KeyboardShortcuts.tsx:280:25
Getting saved sync... KeyboardShortcuts.tsx:280:25
Got reply from saved sync, exists? true KeyboardShortcuts.tsx:280:25
sync(): not doing HTTP hit, instead returning stored /sync data KeyboardShortcuts.tsx:280:25
returning explicit theme: dark KeyboardShortcuts.tsx:280:25
Enabling encryption in !XXXXXXXXX:matrix.org; starting to track device lists for all users therein KeyboardShortcuts.tsx:280:25
Starting to track devices for room !XXXXXXX:matrix.org ... KeyboardShortcuts.tsx:280:25
LL: got 2 membershipEvents from storage for room !XXXXXX:matrix.org ... indexeddb-worker.js:1:1171
Updating homeserver-configured integration managers... KeyboardShortcuts.tsx:280:25
Homeserver has no integration managers KeyboardShortcuts.tsx:280:25
Attempting to get Jitsi conference information from homeserver KeyboardShortcuts.tsx:280:25
Erreur d?analyse XML : mal form?
Emplacement : https://matrix.org/.well-known/matrix/client
Num?ro de ligne 1, Colonne 1 : client:1:1
Jitsi conference domain: jitsi.riot.im KeyboardShortcuts.tsx:280:25
LL: RoomState about to set 2 OOB members ... KeyboardShortcuts.tsx:280:25
LL: RoomState put in OOB_STATUS_FINISHED state ... KeyboardShortcuts.tsx:280:25
Join event for @XXXXXX:matrix.org in !XXXXXX:matrix.org KeyboardShortcuts.tsx:280:25
Enabling encryption in !XXXXXXX:matrix.org; starting to track device lists for all users therein KeyboardShortcuts.tsx:280:25
Starting to track devices for room !XXXXXXX:matrix.org ... KeyboardShortcuts.tsx:280:25
LL: got 0 membershipEvents from storage for room !XXXXXXX:matrix.org ... indexeddb-worker.js:1:1171
Got push rules KeyboardShortcuts.tsx:280:25
Checking lazy load status... KeyboardShortcuts.tsx:280:25
Checking server lazy load support... KeyboardShortcuts.tsx:280:25
Enabling lazy load on sync filter... KeyboardShortcuts.tsx:280:25
Checking whether lazy loading has changed in store... KeyboardShortcuts.tsx:280:25
Got TURN URIs: turn:turn.matrix.org:3478?transport=udp,turn:turn.matrix.org:3478?transport=tcp,turns:turn.matrix.org:443?transport=tcp refresh in 86400 secs KeyboardShortcuts.tsx:280:25
LL: RoomState about to set 0 OOB members ... KeyboardShortcuts.tsx:280:25
LL: RoomState put in OOB_STATUS_FINISHED state ... KeyboardShortcuts.tsx:280:25
Error decrypting event (id=$GHFoxFpLAaPEwe1nr8apkPh_ljqQUFHoBAmTaF8uze8): DecryptionError[msg: Unknown encryption algorithm "undefined".] KeyboardShortcuts.tsx:280:25
Enabling encryption in !XXXXX:matrix.org; starting to track device lists for all users therein KeyboardShortcuts.tsx:280:25
Starting to track devices for room !XXXXXX:matrix.org ... KeyboardShortcuts.tsx:280:25
LL: got 0 membershipEvents from storage for room !XXXXXXX:matrix.org ... indexeddb-worker.js:1:1171
LL: RoomState about to set 0 OOB members ... KeyboardShortcuts.tsx:280:25
LL: RoomState put in OOB_STATUS_FINISHED state ... KeyboardShortcuts.tsx:280:25
Enabling encryption in !XXXXXX:matrix.org; starting to track device lists for all users therein KeyboardShortcuts.tsx:280:25
Starting to track devices for room !XXXXXX:matrix.org ... KeyboardShortcuts.tsx:280:25
Storing client options... KeyboardShortcuts.tsx:280:25
LL: got 0 membershipEvents from storage for room !XXX:matrix.org ... indexeddb-worker.js:1:1171
LL: RoomState about to set 0 OOB members ... KeyboardShortcuts.tsx:280:25
LL: RoomState put in OOB_STATUS_FINISHED state ... KeyboardShortcuts.tsx:280:25
Enabling encryption in !XXX:matrix.org KeyboardShortcuts.tsx:280:25
Enabling encryption in !XXX:matrix.org KeyboardShortcuts.tsx:280:25
Enabling encryption in !XXX:matrix.org KeyboardShortcuts.tsx:280:25
Enabling encryption in !XXX:matrix.org KeyboardShortcuts.tsx:280:25
Enabling encryption in !XXX:matrix.org KeyboardShortcuts.tsx:280:25
Enabling encryption in !XXX:matrix.org KeyboardShortcuts.tsx:280:25
MatrixClient sync state => PREPARED KeyboardShortcuts.tsx:280:25
Checking for COLR support KeyboardShortcuts.tsx:280:25
Browser is Firefox - assuming COLR is supported KeyboardShortcuts.tsx:280:25
RVS update: !XXX:matrix.org undefined loading? false joining? false initial? true shouldPeek? true KeyboardShortcuts.tsx:280:25
newscreen room/!XXX:matrix.org KeyboardShortcuts.tsx:280:25
updateTint from RoomView.gatherTimelinePanelRef KeyboardShortcuts.tsx:280:25
Tinter.tint from updateTint KeyboardShortcuts.tsx:280:25
LL: got 0 membershipEvents from storage for room !XXX:matrix.org ... indexeddb-worker.js:1:1171
Stored client options KeyboardShortcuts.tsx:280:25
Getting filter... KeyboardShortcuts.tsx:280:25
Setting up Mjolnir: after sync KeyboardShortcuts.tsx:280:25
Updating Mjolnir ban lists to: KeyboardShortcuts.tsx:280:25
LL: RoomState about to set 0 OOB members ... KeyboardShortcuts.tsx:280:25
LL: RoomState put in OOB_STATUS_FINISHED state ... KeyboardShortcuts.tsx:280:25
Starting to track devices for room !XXX:matrix.org ... KeyboardShortcuts.tsx:280:25
Caching capabilities:  
Object { "m.room_versions": {?}, "m.change_password": {?} }
KeyboardShortcuts.tsx:280:25
[!XXX:matrix.org] Current version: 5 KeyboardShortcuts.tsx:280:25
[!XXX:matrix.org] Version capability:  
Object { default: "6", available: {?} }
KeyboardShortcuts.tsx:280:25
Sending first sync request... KeyboardShortcuts.tsx:280:25
Waiting for saved sync before starting sync processing... KeyboardShortcuts.tsx:280:25
Verification request $G8ZKVlNyybGcRwQJpMotsXsjWzGsG-T3uBVWLo5MTvI: m.key.verification.key event with id:$Vvtrpv7sTjWcab9eEN742W3JS92XSa3THaEPUhIYCyQ, content:{"key":"Gne5pF3unCkmeFT1wJ8l8BMQsV9zXcRvcfCOQq37ZWM"} deviceId:undefined, sender:@Salamandar:matrix.org, isSentByUs:true, isLiveEvent:true, isRemoteEcho:false, phase:1=>1, observeOnly:false=>true KeyboardShortcuts.tsx:280:25
Verification request $G8ZKVlNyybGcRwQJpMotsXsjWzGsG-T3uBVWLo5MTvI: m.key.verification.key event with id:$9zpY4T7uyehmK9aoTMwxa4NCA0pF7X7gz3wjo2TPxhI, content:{"key":"sidzw2r2UhVxqVMAnJctOnDD3DsydmxxygVFewMtODg"} deviceId:undefined, sender:@XXXXXX:matrix.org, isSentByUs:false, isLiveEvent:true, isRemoteEcho:false, phase:1=>1, observeOnly:true=>true KeyboardShortcuts.tsx:280:25
Verification request $G8ZKVlNyybGcRwQJpMotsXsjWzGsG-T3uBVWLo5MTvI: m.key.verification.mac event with id:$wIN1W44-JXjIXKhIggCOtnBd5gjedWUGWpHjMzghMLk, content:{"mac":{"ed25519:CYJBOHGOMP":"OpnbYkZwWnccbmNjYm1OalltMU9hbGx0TVU5aGJHeDA","ed25519:j+J9iJkUCuZJT6012k2dxIATAmjBBT1Ng0pKjqM2XZ8":"9HEeZVWmV22lMjJsTWpKc1RXcEtjMVJYY0V0ak1WSlk"},"keys":"U1agZ3PtUHSJSFNKU0ZOS1UwWk9TMVV3V2s5VE1WVjM"} deviceId:undefined, sender:@XXXXXX:matrix.org, isSentByUs:false, isLiveEvent:true, isRemoteEcho:false, phase:1=>1, observeOnly:true=>true KeyboardShortcuts.tsx:280:25
Verification request $G8ZKVlNyybGcRwQJpMotsXsjWzGsG-T3uBVWLo5MTvI: m.key.verification.mac event with id:$r88O7Bta9Vxwstr-V_4uaL2cXwWObWsFTRcUHcQGf3s, content:{"keys":"gyAQUUojb2oOMm9PTW05UFRXMDVVRlJYTURWVlJsSlk","mac":{"ed25519:KYTTKOUHUW":"/W0KS4fCZkP7a1A3YTFBM1lURkJNMWxVUmtKTk1XeFY","ed25519:TiR+tvNqp5HyMc2w8Gx8tGjnl6iw8PnwfO4dBcRsCG8":"pwOKS7f2ZjKFaktGYWt0R1lXdDBSMWxYZERCU01XeFk"}} deviceId:undefined, sender:@Salamandar:matrix.org, isSentByUs:true, isLiveEvent:true, isRemoteEcho:false, phase:1=>1, observeOnly:true=>true KeyboardShortcuts.tsx:280:25
Verification request $G8ZKVlNyybGcRwQJpMotsXsjWzGsG-T3uBVWLo5MTvI: m.key.verification.done event with id:$3Pbj4RhDxH7P5fb1Ip3kY0bujtOMHtA4r7aZ-PQ2H1Y, content:{} deviceId:undefined, sender:@XXXXXX:matrix.org, isSentByUs:false, isLiveEvent:true, isRemoteEcho:false, phase:1=>1, observeOnly:true=>true KeyboardShortcuts.tsx:280:25
MatrixClient sync state => PREPARED KeyboardShortcuts.tsx:280:25
MatrixClient sync state => SYNCING KeyboardShortcuts.tsx:280:25
Regenerating room lists: Startup KeyboardShortcuts.tsx:280:25
Regenerating all room lists KeyboardShortcuts.tsx:280:25
Persisting sync data up to m1914407279~2.1914407285_757284961_3016867_804692926_686274274_2184865_237744007_880574025_184720 indexeddb-worker.js:1:1171
Resetting known rooms, initiating regeneration 2 KeyboardShortcuts.tsx:280:25
Verification request $G8ZKVlNyybGcRwQJpMotsXsjWzGsG-T3uBVWLo5MTvI: m.key.verification.done event with id:$qo38TlWBbitIc8EyIMqc-ugmDLbUmuatAbqYL0N0eXw, content:{} deviceId:undefined, sender:@Salamandar:matrix.org, isSentByUs:true, isLiveEvent:true, isRemoteEcho:false, phase:1=>1, observeOnly:true=>true KeyboardShortcuts.tsx:280:25
Verification request $G8ZKVlNyybGcRwQJpMotsXsjWzGsG-T3uBVWLo5MTvI: m.key.verification.cancel event with id:$04AgLEmXOBPpu-7lt7GmoK6k8gS6xnWOh8fRhAvWqtU, content:{"code":"m.timeout","reason":"Other party didn't accept in time"} deviceId:undefined, sender:@XXXXXX:matrix.org, isSentByUs:false, isLiveEvent:true, isRemoteEcho:false, phase:1=>5, observeOnly:true=>true KeyboardShortcuts.tsx:280:25

@jryans
Copy link
Collaborator

jryans commented Apr 29, 2021

screen
Screen { availWidth: 1920, availHeight: 1040, width: 1920, height: 1080, colorDepth: 24, pixelDepth: 24, top: 0, left: 0, availTop: 0, availLeft: 0 }

devicePixelRatio
1

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?

@Salamandar
Copy link
Contributor Author

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).
image

… 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 !
Here are screenshots at 2.04rem:
image

2.05rem:
image

@kittykat
Copy link
Contributor

@Salamandar Are you still seeing this issue with the latest browser versions?
@jryans Could you please help pull out a list of actionable items from this issue?

@Salamandar
Copy link
Contributor Author

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.

@kittykat kittykat added S-Minor Impairs non-critical functionality or suitable workarounds exist O-Uncommon Most users are unlikely to come across this or unexpected workflow Z-Platform-Specific and removed S-Minor Impairs non-critical functionality or suitable workarounds exist labels Sep 17, 2021
@jryans
Copy link
Collaborator

jryans commented Sep 21, 2021

@jryans Could you please help pull out a list of actionable items from this issue?

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:

  • Top and bottom edges of emoji are cut off
  • They are pixelated in a somewhat odd way, leading to a worse visual experience

@jryans
Copy link
Collaborator

jryans commented Sep 21, 2021

I wonder if it's browser or application zoom / font size related...? @Salamandar, are you using either of following?

  • Browser page zoom set to some non-default value (something other than 100%)
  • Element font size in Settings -> Appearance set to some non-default value (something other than the middle as shown below)

image

@frakic
Copy link

frakic commented May 16, 2022

Hey @jryans, I've menaged to reproduce this on Windows 11 Home 21H2 by:

  1. Turning off the custom font I normally use
  2. Making sure my browser's page zoom is set to a default value (100%)
  3. Not using a custom font size in Settings

I took a screenshot in two different browsers:
image

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:
image

(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.

@turt2live
Copy link
Member

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.

@turt2live turt2live closed this as not planned Won't fix, can't repro, duplicate, stale Jun 14, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-Emoji O-Uncommon Most users are unlikely to come across this or unexpected workflow S-Tolerable Low/no impact on users T-Defect X-Cannot-Reproduce X-Needs-Info This issue is blocked awaiting information from the reporter Z-Platform-Specific
Projects
None yet
Development

No branches or pull requests

7 participants