Cropper broken on latest Chrome version (84)

[lander16]

I just updated to version 84 of Chrome and the cropper is broken when I open it on the onFileRead callback, I do this:

onFileRead: function (item, listEl, parentEl, newInputEl, inputEl) {
            item.popup.open();
            if (item.editor) {
                item.editor.cropper();
            } else {
                console.log('no cropper')
            }
        }

This worked fine until this update, now the cropper opens but it doesn't match the background image, it shows like in the image below:

Any guidance on this issue?

Thanks

[lander16]

Forgot to mention that if I don't do item.editor.cropper(); and then open it clicking the button, it works fine.

[lander16]

Seems to have to do with positioning of the image, trying the client side example in Chrome 84 vs Safari I see:

Safari:

Chrome

Hope this helps.

[innostudio]

Working... There is something with display: flex, the popup will need to be written again, because the old logic doesn't work anymore for Chrome 84

[innostudio]

@lander16 a really quick solution that works on Chrome 84, Windows, is:

.fileuploader-popup .fileuploader-popup-node {
    flex-direction: row;
}

I will to investigate what was changed in the new version and I why changing the direction is so important. I will get back with updates.

[lander16]

@innostudio Thanks, that does work, looking forward to your comments on this.

[localota-travel]

I am getting this problem on the most recent version and the flex-direction suggestion does not work for me. If I close the editor and then re-open it on the same file (without re-uploading), the problem resolves itself and can be used properly.

Is there another workaround for this or a fix coming?