Croppie plugin crops the image incorrectly when i use modal window

Question

[https://codepen.io/kurtzalexo/pen/jOYwQNq](Codepen.io) I use cropie and tingle.js. Without a modal window everything works fine. This is what happens, when i crop image from the edge

Tried: https://github.com/Foliotek/Croppie/issues/258, https://github.com/Foliotek/Croppie/issues/764, https://github.com/Foliotek/Croppie/issues/247

Answer 1

I changed these styles from tingle and everything start working correctly.

.tingle-modal--visible .tingle-modal-box {
  animation: scale .2s cubic-bezier(.68, -.55, .265, 1.55) forwards;
}

@keyframes scale {
  0% {
    opacity: 0;
    transform: scale(.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

To:

.tingle-modal--visible .tingle-modal-box {
    animation: scal .2s cubic-bezier(.68, -.55, .265, 1.55) none;
}

@keyframes scal {
  0% {
      top: -100px;
    opacity: 0;
  }
  100% {
    opacity: 1;
      top: 0;
  }
}

It looks like croppy reads the size of the container before applying the transform animation.