当我使用模态 window 时，Croppie 插件会错误地裁剪图像

Question

[https://codepen.io/kurtzalexo/pen/jOYwQNq](Codepen.io) 我使用 cropie 和 tingle.js。没有模式 window 一切正常。 This is what happens, when i crop image from the edge

试过： https://github.com/Foliotek/Croppie/issues/258, https://github.com/Foliotek/Croppie/issues/764, https://github.com/Foliotek/Croppie/issues/247

Answer 1

我从 tingle 更改了这些样式，一切开始正常工作。

.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);
  }
}

收件人：

.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;
  }
}

看起来 croppy 在应用变换动画之前读取了容器的大小。

当我使用模态 window 时，Croppie 插件会错误地裁剪图像

Croppie plugin crops the image incorrectly when i use modal window

javascript

croppie