RocketChat / RocketChat/Rocket.Chat

Image blurry when zoom not neutral

Open
#18,927 3 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area: ui/ux
Dominant language
TypeScript
Stars
46.1k
Forks
13.9k
Avg merge
3d 3h
Merged PRs (30d)
130

Description

Description:
Steps to reproduce:
Expected behavior:
Actual behavior:
Server Setup Information:
  • Version of Rocket.Chat Server:
  • Operating System:
  • Deployment Method:
  • Number of Running Instances:
  • DB Replicaset Oplog:
  • NodeJS Version:
  • MongoDB Version:
Client Setup Information
  • Desktop App or Browser Version:
  • Operating System:
Additional context
Relevant logs:

My Setup

  • Operating System: Windows 10

  • App Version: Rocket.Chat 2.17.11

  • Installation type: EXE

  • I have tested with the latest version

  • I can simulate the issue easily

Description

When clicking on an image in a chat, it opens, but is blurry. This often makes text (very) difficult to read.
Today I finally found out that the image is only blurry when I have zoomed the interface/text (either zoomed in or out). It is sharp when zoom is neutral. However, I need a custom interface/text zoom level (which is thankfully remembered between sessions).

Current Behavior

When clicking on an image in a chat, it opens, but is blurry. This only seems to be the case when interface/text is zoomed in or out (i.e. not neutral/reset).

Expected Behavior

I expect the an image to be shown without scaling, regardless of / independent from the current interface/text zoom level. Possible exception: scale down large image that would otherwise not fit on screen. Possibly allow zooming in/out an opened image, independent from the interface/text zoom (per viewing, and/or as remembered setting between sessions).

BTW: The current shortcut for "Zoom in" is "Ctrl + Shift + =". That is fine, but please also support the shortcut without Shift. That is very widely adopted behavior. Otherwise at least add shortcut "Ctrl + Shift + -" for "Zoom out". It is very un-intuitive to have to press and release Shift while looking for the best zoom level.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No source files, tests, or entry points are named. Start by reproducing the image viewer with interface zoom set above and below neutral in the Rocket.Chat desktop app, then verify that opened images remain sharp and that the requested zoom shortcuts behave as expected.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
desktop, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.