immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-07-25 14:00:45 +03:00
Code Issues 783 Packages Projects Releases 22 Wiki Activity

Zooming in on Safari loads the original image, but Safari does not render it at full resolution #6157

New Issue
Closed
opened 2026-02-05 12:03:49 +03:00 by OVERLORD · 6 comments
OVERLORD commented 2026-02-05 12:03:49 +03:00
Owner
Copy Link

Originally created by @Mdkar on GitHub (May 29, 2025).

I have searched the existing issues, both open and closed, to make sure this is not a duplicate report.

  • Yes

The bug

On both iOS and Mac, viewing an image in Safari does not show the full resolution image even when zooming in. Using the Safari developer tools on Mac I was able to see the full size original image is being loaded, but the rendered image is still low quality.

The OS that Immich Server is running on

Windows 10 WSL2

Version of Immich Server

v1.134.0

Version of Immich Mobile App

N/A

Platform with the issue

  • Server
  • Web
  • Mobile

Your docker-compose.yml content

N/A

Your .env content

N/A

Reproduction steps

  1. View an image in Safari (iOS 18.5 and MacOS 15.5) and zoom in
  2. Notice that the original image shows up in img tag in Developer tools
  3. Notice that that actual image render is still blurry

This is particularly noticeable with text:
This is a 2005 x 3024 JPG
As seen on Mac Safari
Image

As seen on Mac Chrome
Image

Relevant log output

Additional information

I think the issue is with the use of the CSS transform translate3d function to scale the image. Here is an example of what happens if you edit the translate3d into a translate in the Safari inspect element tool. I was only able to do this on Mac, so I'm not sure if it also works on iOS.

HEIC image in Safari with translate3d (original)
Image

HEIC image in Safari with translate (edited)
Image

A different project seems to have had a similar issue with translate3d: https://github.com/BetterTyped/react-zoom-pan-pinch/issues/248

I was not able to validate that just changing translate3d to translate fully works yet, but would be willing to test the frontend code change once I get a dev server running. I would assume the real issue is with Webkit caching the lower resolution version when rendering the translate3d so we would have to see if this caching is avoided when translate is used.

After playing around with the dev tools for some time, the issue randomly went away in one Safari tab (perhaps the original file was finally cached). But this was not consistent. Opening the same link in a new tab in the same window still rendered the low quality version.

Also, I found this issue because I was trying to view original quality images on an album I shared via link on my iPhone. If there is some way to open linked albums on the app itself please let me know.

Originally created by @Mdkar on GitHub (May 29, 2025). ### I have searched the existing issues, both open and closed, to make sure this is not a duplicate report. - [x] Yes ### The bug On both iOS and Mac, viewing an image in Safari does not show the full resolution image even when zooming in. Using the Safari developer tools on Mac I was able to see the full size original image is being loaded, but the rendered image is still low quality. ### The OS that Immich Server is running on Windows 10 WSL2 ### Version of Immich Server v1.134.0 ### Version of Immich Mobile App N/A ### Platform with the issue - [ ] Server - [x] Web - [ ] Mobile ### Your docker-compose.yml content ```YAML N/A ``` ### Your .env content ```Shell N/A ``` ### Reproduction steps 1. View an image in Safari (iOS 18.5 and MacOS 15.5) and zoom in 2. Notice that the original image shows up in img tag in Developer tools 3. Notice that that actual image render is still blurry This is particularly noticeable with text: This is a 2005 x 3024 JPG As seen on Mac Safari <img width="709" alt="Image" src="https://github.com/user-attachments/assets/47bb90ad-d1de-485a-8040-42af105e14de" /> As seen on Mac Chrome <img width="722" alt="Image" src="https://github.com/user-attachments/assets/489db9b2-c17f-4aac-b883-e4cd16077341" /> ### Relevant log output ```shell ``` ### Additional information I think the issue is with the use of the CSS transform `translate3d` function to scale the image. Here is an example of what happens if you edit the `translate3d` into a `translate` in the Safari inspect element tool. I was only able to do this on Mac, so I'm not sure if it also works on iOS. HEIC image in Safari with `translate3d` (original) <img width="755" alt="Image" src="https://github.com/user-attachments/assets/7dd69757-3ab9-4bf0-8dbb-94977552f964" /> HEIC image in Safari with `translate` (edited) <img width="754" alt="Image" src="https://github.com/user-attachments/assets/6761077b-5081-4224-ad8e-a69139b9e525" /> A different project seems to have had a similar issue with `translate3d`: https://github.com/BetterTyped/react-zoom-pan-pinch/issues/248 I was not able to validate that just changing `translate3d` to `translate` fully works yet, but would be willing to test the frontend code change once I get a dev server running. I would assume the real issue is with Webkit caching the lower resolution version when rendering the `translate3d` so we would have to see if this caching is avoided when `translate` is used. After playing around with the dev tools for some time, the issue randomly went away in one Safari tab (perhaps the original file was finally cached). But this was not consistent. Opening the same link in a new tab in the same window still rendered the low quality version. Also, I found this issue because I was trying to view original quality images on an album I shared via link on my iPhone. If there is some way to open linked albums on the app itself please let me know.
OVERLORD added the 🖥️web label 2026-02-05 12:03:49 +03:00
OVERLORD commented 2026-02-05 12:03:52 +03:00
Author
Owner
Copy Link

@bo0tzz commented on GitHub (May 29, 2025):

I think this is probably an issue upstream in https://github.com/willnguyen1312/zoom-image/ ?

@bo0tzz commented on GitHub (May 29, 2025): I think this is probably an issue upstream in https://github.com/willnguyen1312/zoom-image/ ?
OVERLORD commented 2026-02-05 12:03:54 +03:00
Author
Owner
Copy Link

@YarosMallorca commented on GitHub (May 30, 2025):

It might not render at full resolution if this option is off:

@YarosMallorca commented on GitHub (May 30, 2025): It might not render at full resolution if this option is off: <img src="https://github.com/user-attachments/assets/77b9d370-2747-48f8-9d57-1d906f7aa14a" height=400 />
OVERLORD commented 2026-02-05 12:03:55 +03:00
Author
Owner
Copy Link

@bo0tzz commented on GitHub (May 30, 2025):

@YarosMallorca if possible it should always be loading the original on zoom.

@bo0tzz commented on GitHub (May 30, 2025): @YarosMallorca if possible it should always be loading the original on zoom.
OVERLORD commented 2026-02-05 12:03:57 +03:00
Author
Owner
Copy Link

@Mdkar commented on GitHub (May 30, 2025):

@YarosMallorca That setting is not available if you are viewing an album shared via link. Also it will have no effect in this case since the HTML shows the image is being replaced with the original full quality one - the only issue is with Safari rendering it.
If that setting were the issue, the full quality image would not be displaying when I swapped the translate functions or when viewed in Chrome. Regardless, that setting cannot be easily edited until #18385 is merged.

@Mdkar commented on GitHub (May 30, 2025): @YarosMallorca That setting is not available if you are viewing an album shared via link. Also it will have no effect in this case since the HTML shows the image is being replaced with the original full quality one - the only issue is with Safari rendering it. If that setting were the issue, the full quality image would not be displaying when I swapped the translate functions or when viewed in Chrome. Regardless, that setting cannot be easily edited until #18385 is merged.
OVERLORD commented 2026-02-05 12:03:59 +03:00
Author
Owner
Copy Link

@Mdkar commented on GitHub (May 30, 2025):

I think this is probably an issue upstream in https://github.com/willnguyen1312/zoom-image/ ?

I can confirm this is the case. I replaced all occurrences of transform3d(x,y,0) with transform(x,y) in the zoom-image node_modules folder. I am seeing the full quality zoom in Safari on both Mac and iOS. Chrome is behaving normally as well.

@Mdkar commented on GitHub (May 30, 2025): > I think this is probably an issue upstream in https://github.com/willnguyen1312/zoom-image/ ? I can confirm this is the case. I replaced all occurrences of `transform3d(x,y,0)` with `transform(x,y)` in the zoom-image node_modules folder. I am seeing the full quality zoom in Safari on both Mac and iOS. Chrome is behaving normally as well.
OVERLORD commented 2026-02-05 12:04:00 +03:00
Author
Owner
Copy Link

@Mdkar commented on GitHub (Jul 25, 2025):

Fixed with #19868 pulling latest version of zoom-image/core

@Mdkar commented on GitHub (Jul 25, 2025): Fixed with #19868 pulling latest version of zoom-image/core
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
accessibility
changelog:enhancement
changelog:security
changelog:skip
changelog:translation
cli
date-time
dependencies
documentation
external-library
format
good first issue
mobile-beta
mobile-beta
mobile-beta
needs-answer
nice to have
pull-request
Mirrored from GitHub Pull Request
 sharing
tech-debt
📱mobile
🖥️web
🗄️server
🧠machine-learning
No Label 🖥️web
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
OVERLORD
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: immich-app/immich#6157
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?