Flicker appears when zooming in and out of images in the lightbox

[Container-Zero]

Describe the bug

Only when the image is scaled, the image will flicker and some areas of the image will show up as transparent for a few hundred milliseconds and then resume. My images are very large and will load 50 HD images in 4k resolution. After troubleshooting, I found that the cause of this problem is the following css code:

.is-animating .fancybox__content.
.is-dragging .fancybox__content {
    will-change: transform, width, height
}

When I change it to the following form:

.is-animating .fancybox__content.
.is-dragging .fancybox__content {
    will-change: auto
}

After changing it, the problem no longer appears. When I checked will-change, I was very confused, it was supposed to prevent flickering when "transforming", but now it puts the cart before the horse, can you tell me why this problem occurs?

Reproduction

When not modifying the CSS style, there may be image flickering issues.

Additional context

No response

[fancyapps]

Hi,

This is a known browser issue when using large images. Unfortunately, no workarounds have been found for this yet.

[Container-Zero]

Hi,

This is a known browser issue when using large images. Unfortunately, no workarounds have been found for this yet.

I can only avoid this problem by modifying the css, but modifying the css will inevitably result in low performance :(

[fancyapps]

Yes, the problem is caused by CSS code that enables hardware acceleration. If I remove it, the problem goes away, but the performance degrades. I will continue to look for solutions.

[Container-Zero]

Yes, the problem is caused by CSS code that enables hardware acceleration. If I remove it, the problem goes away, but the performance degrades. I will continue to look for solutions.

Any new developments on this issue so far please?

Currently for galleries with high quality image displays, the mobile lag is still disastrous.

I've spent a lot of time trying to solve this problem, and the current solution is to replace srcset with a low-resolution thumbnail at the start of the animation for almost all animations (including dragging, rotating, zooming), and remove the srcset at the end of the animation to restore the original image. This solves the problem but poses a number of challenges, both in terms of optimizing the user experience and in terms of development difficulty. And I think it's probably not a permanent solution.

I'm wondering, is it inevitable that high quality images (resolution: 4K+, size: 1MB±, extension: webp) will lag when processing animations? Is this due to the browser itself? (In non-fancybox conditions, make sure that in clean native browsers, such high-resolution images performing similar animations still cause performance lag?)

[fancyapps]

If I open a 4K+ image (eg https://lipsum.app/id/60/8000x6000) on my computer in a new tab and try to quickly zoom and pan, it's quite laggy at first. So I think it's pretty unrealistic to expect it to perform even better on a page full of other elements and JS. At the same time i have some ideas to make it perform better, but sorry, you'll probably have to wait for Fancybox6 (in about a year or so; it will be quite revolutionary).

[Container-Zero]

If I open a 4K+ image (eg https://lipsum.app/id/60/8000x6000) on my computer in a new tab and try to quickly zoom and pan, it's quite laggy at first. So I think it's pretty unrealistic to expect it to perform even better on a page full of other elements and JS. At the same time i have some ideas to make it perform better, but sorry, you'll probably have to wait for Fancybox6 (in about a year or so; it will be quite revolutionary).

Wow! I'm very much looking forward to it! But at the same time I'm curious, how does the new program solve the above problem? Can you tell us a little bit about your thinking if you can?

[fancyapps]

I'll keep it a secret for now :) The goal is for Fancybox to always be one step ahead of the competition.

[Container-Zero]

I'll keep it a secret for now :) The goal is for Fancybox to always be one step ahead of the competition.

Hahaha XD