Ionic4 / mobile Safari - 如果 angular-cropper 组件存在，模式按钮不会触发点击事件

Question

我正在开发基于 ngx-rocket 初学者工具包的 Ionic 4 应用程序。

我有一个带有 angular-cropper 元素的模式 window 和一个带有“关闭”和“应用”按钮的工具栏。

这是模态的 html:

<ion-header color="c-dark-gray" no-border>
    <ion-toolbar no-padding color="c-dark-gray">
        <ion-buttons slot="start">
            <ion-button fill="clear" no-margin no-padding text-center (click)="dismiss()">
                <ion-icon slot="icon-only" name="close" color="light"></ion-icon>
            </ion-button>
        </ion-buttons>

        <ion-title translate color="light">Move and Scale</ion-title>

        <ion-buttons slot="end">
            <ion-button fill="clear" no-padding no-margin (click)="apply()">
                <ion-text translate color="c-orange" text-uppercase>Apply</ion-text>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content color="c-dark-gray">
    <ion-grid no-padding no-margin>
        <ion-row>
            <ion-col no-padding no-margin>
                    <angular-cropper
                        #cropper
                        *ngIf="_image"
                        [cropperOptions]="_cropperjsSettings"
                        [imageUrl]="_image"
                        [ngClass]="{'round-cropper': _round}"></angular-cropper>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

问题：在 Android 和浏览器（chrome、FF 和 safari）上一切正常，但 仅在 iPhone 设备上的 Safari（在 5、7、8+ 上测试），按钮不会触发点击事件。实际上，我放置在模态页面、页眉、页脚、工具栏或内容中、裁剪器上方、下方，甚至是其顶部的绝对定位覆盖的任何按钮或可点击元素都不起作用，并且仅在 iPhone 设备（Safari）。模态框上的 cropper 元素工作正常。

此外，按钮是可访问和可点击的 - 它们与点击进行视觉交互，在检查器中我可以看到类在点击按钮元素时移动它们。但由于某种原因，没有点击事件发送到应用程序，点击处理程序也不是运行。如果我删除 angular-cropper 元素，按钮将正常工作。

我试过将模式转换为弹出窗口，但得到了类似的结果（按钮未触发点击事件）。我还没有尝试过的一件事是为裁剪设置一个完整的路由页面，但这不是一个可接受的解决方案，设计明智。

我还创建了一个带有类似页面和模态的小型 ionic 侧边菜单测试应用程序，但一切都很好，所以这不是 Ionic 在模态上不支持裁剪器的问题。请注意，整个小工具在 V3 中运行良好。问题发生在最新的 Ionic4 上。

我错过了什么？有没有我没有导入的模块？欢迎任何想法或线索。

打开模态的代码：

 async cropBanner(ev: any) {
        const modal = await this.modal.create({
            component: ModalImageCropComponent,
            componentProps: {
                event: ev,
                ratio: 3 /4
            },
            showBackdrop: false
        });

        modal.onDidDismiss()
            .then((evMod: OverlayEventDetail<any>) => {
                this._bannerInput.getInputElement()
                    .then((val: HTMLInputElement) => {
                        log.debug('resetting input');
                        val.value = null;
                    });
            });
        await modal.present();
}

和模态的 ngModule 声明：

@NgModule({
  declarations: [
    ModalImageCropComponent
  ],
  exports: [
    ModalImageCropComponent
  ],
  entryComponents: [
    ModalImageCropComponent
  ],
  imports: [
    CommonModule,
    IonicModule,
    AngularCropperjsModule
  ]
})

包：

离子信息

Ionic:

   ionic (Ionic CLI) : 4.10.3

System:

   NodeJS : v10.15.1
   npm    : 6.8.0
   OS     : macOS High Sierra

ng 版本

Angular CLI: 7.3.1
Node: 10.15.1
OS: darwin x64
Angular: 7.2.4

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.1
@angular-devkit/build-angular     0.13.1
@angular-devkit/build-optimizer   0.13.1
@angular-devkit/build-webpack     0.13.1
@angular-devkit/core              7.3.1
@angular-devkit/schematics        7.3.1
@angular/cli                      7.3.1
@ngtools/webpack                  7.3.1
@schematics/angular               7.3.1
@schematics/update                0.13.1
rxjs                              6.4.0
typescript                        3.2.4
webpack                           4.29.0

npm 列表 | grep离子

├─┬ @ionic-native/core@5.0.0
├─┬ @ionic-native/splash-screen@5.0.0
├─┬ @ionic-native/status-bar@5.0.0
├─┬ @ionic/angular@4.0.2
│ ├─┬ @ionic/core@4.0.2
│ │ └── ionicons@4.5.5
├─┬ @ionic/v4-migration-tslint@1.7.0
├── cordova-plugin-ionic-keyboard@2.1.3
├── cordova-plugin-ionic-webview@3.1.2

Answer 1

经过更多的挖掘，我仍然不知道为什么模态按钮在 Safari 上不起作用，但我怀疑过时的 angular-cropperjs 包不能处理 V4 阴影 DOM 正确。我考虑过自己更新包，但没有资源。

解决方案：根据此 SO post：angular-2-4-add-compiled-component-to-an-iframe，解决方法是 将 angular-cropperjs 元素动态放置在 iFrame 中.它需要对 iFrame 的样式进行一些调整，但成功了。

Ionic4 / mobile Safari - 如果 angular-cropper 组件存在，模式按钮不会触发点击事件

Ionic4 / mobile Safari - Buttons on modal are not firing click event if angular-cropper component is present

javascript

angular

mobile-safari

ionic4

cropperjs