iOS上用户交互时背景图像闪烁[Ionic 5]

我正在尝试在一个多页面的Ionic应用程序上使用背景图像，我正在从Ionic 3升级到Ionic 5。在iOS上，除了加载的第一个页面之外，任何页面都会出现背景图像闪烁的问题。我尝试实现这个解决方案：它在web浏览器中工作，但当我在Xcode的模拟器中运行它时，ionViewWillEnter不会在iOS中启动，而是会在浏览器中启动（实时重新加载）

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

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

解决方法如下所示：

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

当我运行它时，IonViewEnter将在web浏览器中运行时触发，但当我在模拟器中运行它时，不会触发。我一直在读到，它只会触发一次，在从侧菜单触发时会出现问题，但我不确定这是否是我遇到的问题，因为它没有提到在浏览器中工作，但在iOS中没有提到

---

我只想在所有平台上工作的不同页面上设置不同的背景图像。肯定有更好的办法吗？任何帮助都将不胜感激。

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

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

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

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

---

这就解决了我的问题。

只是为了让别人更简洁一点。这是一个工作解决方案，用于在没有flash的情况下为Web和移动视图提供不同的图像

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

}

并在ionViewWillEnter中选中media query，如下所示

 ionViewWillEnter() {
   const x = window.matchMedia("(min-width: 850px)");
   if (x.matches) {
    // If media query matches
   this.initializeBackgroundWeb();
  } else {
  this.initializeBackgroundMobile();
  }
  }

然后你可以在你的ion内容中创建一个div，并像上面的答案一样设置高度和宽度

 .splash {
  height: 100%;
  width: 100%;
  } 
    

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

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

 constructor(private domCtrl: DomController
  ) {}

 private initializeBackgroundWeb(): void {
try {
  console.log("initializing background");
  const content = document.querySelector(".background");
  const innerScroll = content.shadowRoot.querySelector(".inner-scroll");
  this.domCtrl.write(() => {
    innerScroll.setAttribute(
      "style",
      'background: url("../../assets/images/back7.jpg") center center / cover no-repeat'
    );
  });

  console.log("background initialized");
} catch (e) {}
console.log("background not initialized");
  }


 private initializeBackgroundMobile(): void {
try {
  console.log("initializing background");
  const content = document.querySelector(".background");
  const innerScroll = content.shadowRoot.querySelector(".inner-scroll");
  this.domCtrl.write(() => {
    innerScroll.setAttribute(
      "style",
      'background: url("../../assets/images/back18.jpg") center center / cover no-repeat'
    );
  });

  console.log("background initialized");
} catch (e) {}
console.log("background not initialized");

 ionViewWillEnter() {
   const x = window.matchMedia("(min-width: 850px)");
   if (x.matches) {
    // If media query matches
   this.initializeBackgroundWeb();
  } else {
  this.initializeBackgroundMobile();
  }
  }

 .splash {
  height: 100%;
  width: 100%;
  }