Safari for iOS: Scaled up image is blurry regardless of original image size

[tobiaseichert]

Bug description

When you scale up an image using medium-zoom, the resulting scaled image will be blurry.

How to reproduce

Please have a look at my comments (including various examples) on bugs.webkit.org.

Expected behavior

The resulting image should be sharp.

Reproducible example

To verify, open this example on https://3zive.csb.app/

using Safari for iOS. I've modified the library to use translate instead of translate3D as the latter already has problems with Safari on iOS (see the issue on webkit.org). Still, the zoomed image will not be sharp. Maybe there's some kind of workaround using CSS attributes to get Safari to rerender the image after it has been zoomed.

Link to the bug reproduction

Environment

• Browser: Safari (iOS 13.3.1)
• medium-zoom version: 1.0.5

As this problems occurs on Safari for iOS, all other browsers using WebKit on iOS (e.g. Firefox) should also be affected.

[moujikov]

An iOS Safari issue discussed here seems to be related: https://stackoverflow.com/questions/57952702/image-is-blurry-when-upscaling-in-mobile-safari

[damirkotoric]

In my situation the following helped fix that:

.medium-zoom-image--opened { object-fit: contain; }

[moujikov]

.medium-zoom-image--opened { object-fit: contain; }

I've just given it a try: no changes for me, still blurry on iOS 13.3.1

Just a guess: Remote debugging may force Safari to re-render the image correctly. Were you remote debugging by any chance?

[damirkotoric]

No I wasn't remote debugging in Safari. My blurriness might have been caused by https://github.com/francoischalifour/medium-zoom/issues/143.

[tobiaseichert]

Just a quick heads-up: there's a simple script which basically does the same as medium-zoom. Despite having fewer options it also doesn't exhibit the problem described above. You can find it here:

https://github.com/spinningarrow/zoom-vanilla.js

I have yet to find the difference which results in non-blurred scaled up images, but for now I'm fine with the solution.

[leonbeon]

Is there a fix or workaround for this? Really love this library and I need one that can zoom programatically and not using data-* tags. Safari ruining the fun for everyone again.

[francoischalifour]

In theory, you could manipulate a CSS property that triggers a paint so that Safari "reflows" the screen. See Rendering Performance on web.dev.

There might be other ways of doing this. If someone wants to go ahead and send a PR, I'd happily review it.

[antoine1003]

@tobiaseichert Your workaround worked for me thanks for sharing 🥳

[Jesse205]

I'm in the same boat, but I'm using Edge on Windows 10

The shadows were added by me, but the picture is still unclear after removing the shadow

I tried using width=auto;height=auto; directly instead of transform and the problem is gone

• Version：1.0.8