iOS 上的背景图像随着用户交互而闪烁 [Ionic 5]

我正在尝试让背景图像在我正在从 Ionic 3 更新到 5 的多页 Ionic 应用程序上工作。除了加载的第一页之外，我在 iOS 上的任何页面上都遇到了闪烁的背景图像问题。我尝试实施这个解决方案：如何在 Ionic 中将图像同时放入 和 中 https://stackoverflow.com/questions/64014659/how-to-put-image-in-both-ion-header-and-ion-content-in-ionic它可以在网络浏览器中运行，但是当我在 Xcode 的模拟器中运行它时，ionViewWillEnter 不会在 iOS 中触发，但会在浏览器中触发（实时重新加载）。

这是 CSS 中的旧代码，它在 iOS 中产生闪烁：

ion-content {
    --background: url(/assets/imgs/bg/piano.jpg) no-repeat center/ cover fixed;
    }

解决方法如下所示：

import { DomController } from '@ionic/angular';

...

constructor(public navCtrl: NavController, private domCtrl: DomController) {
  }

...

private initializeBackground(): void {
    try {
      console.log ('initializing background');
      const content = document.querySelector('#level');
      const innerScroll = content.shadowRoot.querySelector('.inner-scroll');
      this.domCtrl.write(() => {
        innerScroll.setAttribute(
          'style',
          'background: url("/assets/imgs/bg/piano.jpg") no-repeat center center / cover'
        );
        });
        console.log('background initialized'); } catch (e) {}
        console.log('background not initialized');
  }

...

ionViewWillEnter() {
    console.log('After Init?');
    this.initializeBackground();   
  }

当我运行它时，ionViewWillEnter 在网络浏览器中运行它时会触发，但当我在模拟器中运行它时，它不会。我一直读到它只会触发一次，并且从侧面菜单触发时会出现问题https://fantashit.com/ionic-4-ionviewwillenter-only-triggers-once/ https://fantashit.com/ionic-4-ionviewwillenter-only-triggers-once/但我不确定这就是我遇到的问题，因为它没有提到这在浏览器中工作，但在 iOS 中却没有。

我想要的只是在适用于所有平台的不同页面上设置不同的背景图像。当然有更好的方法吗？任何帮助将不胜感激。

在放弃 ionViewWillEnter 功能/错误问题后，我想出了一个解决方法。 我没有使用 .ion-content {--background...} 我在 html 中创建了一个包装器

<ion-content>
  <div class = "splash"></div>

并设置css如下：

.splash {
background: url(/assets/imgs/bg/piano.jpg) no-repeat center/ cover fixed;
width: 100%;
height: 100%;

} 然后将实际内容上移 100% 以覆盖背景：

ion-grid{
    margin-top: -100vh;
    height: 100%;
    width:100%;
}

这为我解决了问题。