Binding Croppie when element isn't visible causes boundaries to be incorrect about croppie HOT 6 CLOSED

After i remove the fade, it works well.
i think i need this function

window.setInterval(function () {
    if($('modal').is(':animate')) {
    }
},100)

Thank you.

from croppie.

The problem is the croppie element is being bound when it isn't visible. The logic to prohibit dragging outside boundaries and zooming within the boundaries is heavily dependent on the element being visible.

As a quick fix, you could copy line 125 from index.html and paste it inside your $('#head_face').click() after you show the modal. Binding the image calls all the functions we need to update those boundaries properly, and placing the bind after the modal is shown would do just that.

As a more permanent solution, I think we probably need to provide a refresh() method on a croppie instance, for scenarios when the croppie wasn't visible when it was bound, but becomes visible later.

from croppie.

The code evaluate the image's position relative to its parent. but its parent node should not be my modal, evalute the image's position must be base on its parent which with releative attr. so my modal's position should not effect your code.

And i have tried as you said, but failed. o.o

from croppie.

Since you're using bootstrap's modals and they animate, you'll have to wait until that animation is finished before you rebind your croppie element.

from croppie.

Thanks for the suggestion.

I've added a refresh method on the croppie instance. You should be able to call that without providing the binding data after the croppie element is visible and not moving.

That'll be included in the next bower/npm release.

from croppie.

I fixed this with the following code

Croppie.prototype.refresh = function(){ let zoom = (this.get()).zoom; this.setZoom(zoom - .01); }

from croppie.