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

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]

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

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