Zooming out in browser forces the image to disappear

[saadsaeed01]

Description
On certain width and height of the parent div in which the cropper component is placed, the image starts to get disappear.

To Reproduce
Steps to reproduce the behavior:
I am setting the CanvasWidth (200px) and CanvasHeight(70px) for the div in which the cropper is placed

If I zoom out the browser window the image starts to get disappear

Initial state

Zoom out (67%)

Expected behavior
If I set CanvasWidth (200px) and CanvasHeight(100px), then this problem does not happen

Zoom out (67%) {Note that image is not disappearing now}

What can be the possible reason behind this behavior?

Desktop

• OS: Windows 11 pro
• Browser [Edge]
• Version [115.0.1901.183]

[MaxymGorn]

Hi @saadsaeed01. Arguably this can help you: fengyuanchen/cropperjs#147

[saadsaeed01]

HI @MaxymGorn

This is not helping me to sort out this issue. Please see the video of what's happening over here.

https://www.loom.com/share/dca17ddfcb5f4b2285b37903d7a56792?sid=6895b4ba-8308-457f-9035-18cd3d50f1df

We needed to somehow intercept the zoom event if the cursor is not over the cropper and make sure it doesn't change the styles of the inner div elements

Waiting for your response!
S

[MaxymGorn]

@saadsaeed01 Yes, I see your problem. I have the same one in an empty project, at the moment I don't know a clear reason why this happens! Maybe you need some styles for the cropper element or its container. It seems that there is no such problem on the demo cropper website, I am still trying to find out what could have caused this

[MaxymGorn]

In addition, I think it is worth writing about this problem in the cropper.js repository, most likely, the author of the library will know the answer. Repository cropper.js: https://github.com/fengyuanchen/cropperjs

[saadsaeed01]

Hi @MaxymGorn

I have created a solution that works for me!
I have taken inspiration from this: fengyuanchen/cropperjs#885 (comment)
Can you please check it out?

let timer
window.addEventListener('resize', () => {
    if (cropper == undefined) {
        return;
    }
    let keys = Object.keys(cropper.cropperInstances);
    clearTimeout(timer);
    keys.forEach((key) => {
        cropper.cropperInstances[key].disable();

    });
    timer = setTimeout(() => {
        let keys = Object.keys(cropper.cropperInstances);
        keys.forEach((key) => {
            cropper.cropperInstances[key].enable();

        });
    }, 100);
})

[MaxymGorn]

Hi @saadsaeed01. Great solution. I just some refactored this code and adding check when the cropper module is unloaded or there are no croppers at all:

let timer
window.addEventListener('resize', () => {
    if (!Object.hasOwn(this, 'cropper') || cropper == null || cropper.cropperInstances == null) {
        return;
    }
    let keys = Object.keys(cropper.cropperInstances);
    clearTimeout(timer);
    if (keys.length > 0) {
        keys.forEach((key) => {
            cropper.cropperInstances[key].disable();
        });
        timer = setTimeout(() => {
            let keys = Object.keys(cropper.cropperInstances);
            keys.forEach((key) => {
                cropper.cropperInstances[key].enable();
            });
        }, 100);
    }
})