使用Croppie.js在模态框裁剪图片时出现错位、黑图/空图上传问题

我在本地服务器开发网站时，遇到了一个Croppie.js相关问题。该问题仅在使用模态框裁剪图片时出现，未使用模态框的场景下运行完全正常，示例见：[codepen]。

我已在Codepen上复现该问题，使用的测试图片如下：

问题详情 #

在Codepen使用模态框时，问题仅在编辑器视图（图B）中出现，示例见：[codepen]。但出乎意料的是，详情视图（图A）中所有功能均正常，示例见：[codepen]。

正常表现：在详情视图的模态框中拖动缩放滑块时，图片会以自身中心为原点进行变换。

异常表现：但在编辑器视图中，图片会以边角为原点进行变换，点击裁剪按钮后会上传全黑的图片。

部分情况下（视缩放比例而定）不会返回全黑图，而是出现以下异常：

• 仅上传图片左侧区域，右侧区域被截断；
• 上传的图片为放大后的边角局部内容。

即使不使用缩放功能，图片也存在错位问题。

测试环境 #

目前测试显示该问题不会在移动端浏览器出现（仅测试了谷歌Chrome和火狐Firefox浏览器），在Windows 7和Windows 10的桌面端浏览器中可复现（尚未测试其他操作系统）。

存在问题的环境：

• Windows 10：谷歌Chrome、微软Edge浏览器
• Windows 7：微软Edge浏览器

无问题的环境：

• Windows 10：火狐Firefox浏览器
• Windows 7：谷歌Chrome、火狐Firefox浏览器

已尝试的排查方案 #

我已尝试调试croppie.css和croppie.js文件，但未定位到问题根源。我高度怀疑问题出在JS文件中，可能与CSS的transform-origin属性有关，或是获取图片尺寸的函数在模态框场景下返回了错误值。请问有人知道该问题的诱因是什么吗？

内容的提问来源于stack exchange，提问作者amatek