Signal-desktop: Emoji-Panel Looks Broken on 4K

[Xashyar]

• [x] I have searched open and closed issues for duplicates

---

Screenshots

Platform info

Operating System: Windows 10 (Latest)

Signal version: 1.1.0-beta.6

[Dyras]

If you lower the resolution in Windows to 1080p, does the emoji drawer go back to normal?

[Xashyar]

Yeah! it goes back to normal, but the attachment save/open, window becomes ridiculously enlarged in proportion to the whole UI of the app.

[Dyras]

@khashyarkh Can you open the drawer to trigger the bug, then upload and post a debug log?
View-> Debug Log -> Send -> Post the link here

[Xashyar]

https://gist.github.com/41ed53f78f6c4e17a8668b0153c6e4e9

[scottnonnenberg]

@khashyarkh Thanks for the log. Sadly, there's nothing useful there.

At a high level, it looks like system display/text scaling settings are causing our sprite math to go awry.

Can you go into your windows resolution/zoom level settings screens and provide all the details you see there? Some guidance about those system settings are here: https://www.thurrott.com/windows/windows-10/4597/windows-10-feature-focus-display-scaling

[Xashyar]

Diagonal: 15.6"
Resolution: 3840 x 2160
Scale: 250%

[guiweber]

Also seeing this issue with the same settings as khashyarkh, on Signal v1.3.0

[Xashyar]

@guiweber
Hi, Sorry for the Delay.
yes and it is the same with the current version (1.6.0-beta.2)

[Vectis99]

Seeing this same issue on Signal v1.11.0 Desktop (Windows 10)
15 inch-
Resolution: 3840 x 2160
Scale: 250%

[dosco]

I have a Mac which does not let me set my display resolution manually but I could recreate this issue with Cmd++ (Zoom In). @scottnonnenberg is correct it's related to the sprite math. When each emoji div size is scaled the underlying background image holding all the emoji images does not scale proportionally.

In short the fix is to move to individual images. If you look at FB, Twitter and Linkedin have all built their emoji picker using individual images for each emoji. This would also make it easier to incorporate other emoji related feature requests like inline emoji, typehead, tooltips, etc.

[Hannnsen]

Signal v1.16.0
Windows 10 Build 17134.254
Device: HP Spectre 15.6"
Screen Resolution: 3840x2160
Scaling: 250%

Can confirm the issue on this Version with this setup.

[wormeyman]

Zooming out one step is a workaround for me.

[JaredPotter]

Took a dive down this yesterday. The issue seems to lie in the background-position CSS attribute for all the individual emojis being selected from the full 50x50 emoji PNG, when zoomed in by 250%, which only becomes available as a zoom option on larger resolution displays.

I haven't found a solution yet. Does anyone know of a more reliable way to to either use background-position, or another CSS attribute to guarantee the position?

[brunobola]

Also have the same issue:

Windows resolution detail:

[Xashyar]

Beautifully Fixed in 0e9d549cf336df6d74de327593f1ea165d39d769 :)