ui icon indicating copy to clipboard operation
ui copied to clipboard

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

Open Container-Zero opened this issue 1 year ago • 8 comments

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

Container-Zero avatar Jun 03 '23 21:06 Container-Zero