JCrop in Firefox attaches original image height/width

Question

We're using the JCrop library for cropping the profile picture. When the user changes his profile picture, the new picture still uses the old image dimensions. This works in Chrome but doesn't work in Firefox. I remove the previous image and the JCrop using the destroy:

jcrop_api.destroy();

I have also added this line of code in an attempt to clear the styles that contains the width and the height.

$('#target').removeAttr('style');

Answer 1

I have also met this issue and I tried everything and finally discovered a workaround that works for me:

There must be an alert() function if using Firefox and jcrop destruction and initialization again.

// Clear selector
if (jcropAPI) {
    jcropAPI.destroy();
    }

initCropper();

// If browser is Firefox, fix bug with stretching
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
    // Do Firefox-related activities
    alert('File successfully loaded');  // this alert is necessary
    if (jcropAPI) {
        jcropAPI.destroy();
    }
    initCropper();
}