[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
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.