Safari displays a zoomed image in degraded quality

[nazar-ch]

Describe the bug

The current desktop & mobile versions of Safari initially load smaller images from the slide's scrSet, and after zooming in and replacing the smaller image with the larger version, render it in degraded quality.

Please check the screenshot (or the recording) with the illustration of the issue.

The browser loads the correct image (I checked this by using visually marked images), but displays it in a quality that resembles the low res version.

It seems to be caused by a bug in Safari. The transform: translateZ(0px) in the img style may change the way how the image is rendered and something in the rendering engine caches the original image dimensions. When src is replaced with another larger image it's rendered with the cached smaller dimensions.

Disabling translateZ by adding this style resolves the problem:

.yarl__slide_image {
    -webkit-transform: none !important;
}

Expected behavior

The high res image retains its quality

How to reproduce

• Create the lightbox using srcSet with variants of different sizes.
• Open in iOS Safari or Desktop Safari with the smallest window width.
• Zoom in and see that large.jpg is displayed with degraded quality.

<Lightbox
    slides={[
        {
           // ...
           srcSet: [
                { width: 500, height: 500, src: 'small.jpg' },
                { width: 3000, height: 3000, src: 'large.jpg' },
            ],
        },
    ]}
/>;

Screenshots / Logs

Recording:
https://github.com/igordanchenko/yet-another-react-lightbox/assets/8333702/435e9aca-0f57-447e-8d85-42c83968307f

Additional context

No response

[igordanchenko]

Thank you for the very detailed report. I appreciate it!

Apparently, you discovered a Safari bug caused by the code meant to workaround a different Safari bug 😅

yet-another-react-lightbox/src/plugins/zoom/ResponsiveImage.tsx

Lines 85 to 88 in 39426d4

	const style = {
	// workaround occasional flickering in mobile Safari
	WebkitTransform: "translateZ(0)",
	};

yet-another-react-lightbox/src/styles.scss

Lines 100 to 106 in 39426d4

	// workaround occasional image flickering in desktop Safari
	@media screen and (min-width: 800px) {
	// noinspection CssUnknownProperty
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	}

I'll implement another workaround to fix the blurred image, but keep in mind that images will still appear blurry during zoom-in / zoom-out transition.

Screen.Recording.2024-07-01.at.7.57.10.AM.mov

It's another Webkit bug dating back to 2009 😱

https://bugs.webkit.org/show_bug.cgi?id=27684

[github-actions]

🎉 This issue has been resolved in version 3.20.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[nazar-ch]

🤦

Thank you for the fix! The turnaround time is extraordinary :)

The blurry part feels like expected behavior, I hope it will be fine for users.