ghost line remain after move crop box

[kimuhjin]

when i try to zoom in/out or move cropbox, canvas draw solid line right side of image.
when i move img to ghost line, it's disappeared.
this issue is not always happened.

当我zoom in/out或移动cropbox， 图片的右边有一条黑线。如果把图片移到黑线，黑线就没了。
我想reset canvas after move cropbox，但找不到 canvas element.

[kimuhjin]

i solved this problem with relative issue's comment

//css
.CropperRefresh {
    background-color: white !important;
}

//js
const handleClearCanvas = (canvas) => {
        let canvasEl = canvas.path[1];
        if (canvasEl) {
            canvasEl?.classList?.add('CropperRefresh');
            setTimeout(() => {
                canvasEl?.classList?.remove('CropperRefresh');
            }, 100);
        }
    };

<Cropper
cropmove={handleClearCanvas}
zoom={handleClearCanvas}
...
/>

but i still remain some question
can i force to refresh canvas with add or remove class to canvas?

[fengyuanchen]

What's your browser? Version? Any demo?

[matthewfedak]

I also have this problem. Windows 10 with Chrome Version 93.

Will try the fix above and post feedback shortly

[fengyuanchen]

You can try to add style="will-change: transform;" to the container of the Cropper.

[shadow-Fiend]

I encountered similar problems during initial loading and tailoring.
I suspect that there is a rounding error caused by scaling the image inside the Cropper component.
I've trimmed width minus 1px to remove the extra black lines by dragging the clipping end method in cropend and calling the setData method.

cropper.setData({
    width: state.imgWidth - 1,
});

[fengyuanchen]

@shadow-Fiend see #551

[fengyuanchen]

This issue has been fixed as of v1.5.13.