Ionic Angular在小米平板4上模态框表单空白闪烁问题求助

问题描述 #

登录页的配置模态框在小米平板4上弹出后，仅头部标题栏和底部按钮可见，表单区域空白；点击屏幕后部分字段显示，与ion-select交互后才能正常显示全部表单内容。该问题仅出现在小米平板4这一特定设备上，其他设备无此异常。

项目环境 #

Ionic:
   Ionic CLI                     : 7.2.0
   Ionic Framework               : @ionic/angular 4.11.13
   @angular-devkit/build-angular : 0.13.10
   @angular-devkit/schematics    : 7.3.10
   @angular/cli                  : 7.3.10
   @ionic/angular-toolkit        : 1.5.1

Cordova:
   Cordova CLI       : 12.0.0
   Cordova Platforms : android 12.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0等

System:
   Android SDK Tools : 26.1.1
   NodeJS            : v16.15.1
   npm               : 8.11.0
   OS                : Linux 4.15

解决思路 #

1. 强制触发Angular视图变更检测

模态框初始化后可能未触发视图更新，在模态框页面的ionViewDidEnter钩子中手动触发变更检测：

// ConfigmodalPage.ts
import { Component } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-configmodal',
  templateUrl: './configmodal.page.html',
  styleUrls: ['./configmodal.page.scss'],
})
export class ConfigmodalPage {
  ipInterno: string = '';
  ipExterno: string = '';
  tipo: string = '1';

  constructor(private cdr: ChangeDetectorRef) {}

  ionViewDidEnter() {
    // 强制检测视图变更，触发渲染
    this.cdr.detectChanges();
  }

  // 其他方法：dropBase()、closeConfigModal()、gravarConfig()
}

2. 禁用硬件加速或添加渲染触发样式

小米平板4的WebView硬件加速可能导致渲染异常，可通过两种方式处理：

• 全局禁用硬件加速：在config.xml中添加配置

<platform name="android">
    <preference name="AndroidHardwareAcceleration" value="false" />
</platform>

• 针对模态框添加强制渲染样式：
  创建模态框时指定自定义CSS类：

// 父页面ts
async configModal() {
  const modal = await this.modalController.create({
    component: ConfigmodalPage,
    cssClass: 'force-render-modal'
  });
  return await modal.present();
}

在global.scss中添加样式：

.force-render-modal ion-content {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

3. 更新Ionic WebView插件

当前使用的cordova-plugin-ionic-webview 5.0.0版本可能与Android 12存在兼容性问题，更新到最新稳定版：

cordova plugin remove cordova-plugin-ionic-webview
cordova plugin add cordova-plugin-ionic-webview@latest

4. 确保ngModel绑定变量初始化

未初始化的变量可能导致Angular不渲染对应表单控件，在ConfigmodalPage中明确初始化绑定变量：

export class ConfigmodalPage {
  // 初始化ngModel绑定的变量
  ipInterno: string = '';
  ipExterno: string = '';
  tipo: string = '1';

  // ...其他代码
}

5. 延迟模态框内容渲染

在模态框present后延迟触发内容渲染，给WebView足够的时间加载：

async configModal() {
  const modal = await this.modalController.create({
    component: ConfigmodalPage
  });
  await modal.present();
  // 延迟100ms触发视图更新
  setTimeout(() => {
    const modalContent = document.querySelector('.force-render-modal ion-content');
    if (modalContent) {
      modalContent.style.display = 'none';
      setTimeout(() => modalContent.style.display = 'block', 10);
    }
  }, 100);
}

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