背景图像在iOS上与用户交互时 Flink [Ionic 5]

pbpqsu0x 于 2023-05-02 发布在 iOS

关注(0)|答案(3)|浏览(140)

我试图让一个多页的离子应用程序，我从离子3更新到5工作的背景图像。我得到了 Flink 的背景图像问题在iOS上的任何页面以外的第一页加载。我尝试了这个解决方案：How to put image in both and in Ionic，它在Web浏览器中工作，但当我在Xcode中的模拟器中运行它时，ionViewWillEnter不会在iOS中触发，但会在浏览器中触发（实时重新加载）。
这是CSS中的旧代码，它在iOS中产生 Flink ：

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在Web浏览器中运行它时会触发，但当我在模拟器中运行它时，它不会。我一直在阅读，它只会触发一次，并有问题时，从侧菜单https://fantashit.com/ionic-4-ionviewwillenter-only-triggers-once/触发，但我不确定这是我的问题，因为它没有提到这在浏览器中的工作，但不是在iOS。
所有我想要的是设置不同的背景图像在不同的网页上的工作在所有平台上。难道还有更好的办法吗？任何帮助将不胜感激。

ios

来源：https://stackoverflow.com/questions/65159372/background-image-flickering-with-user-interaction-on-ios-ionic-5

3条答案

按热度按时间

im9ewurl1#

在放弃了ionViewWillEnter特性/bug问题后，我想出了一个变通方案。而不是使用。离子含量{--背景。..}我在html中创建了一个 Package 器

<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%;
}

这为我解决了问题。

赞(0）回复(0）举报 2023-05-02

mcvgt66p2#

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

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中的媒体查询，如下所示。

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

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

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

赞(0）回复(0）举报 2023-05-02

db2dz4w83#

我迟到了，但有些人可能会发现答案很有用。
如果你将图像转换为Base64并在CSS中使用它， Flink 就不会发生。

--background: url("data:image/svg+xml;base64,YOUR_BASE64_IMAGE")

我通常使用这个网站来转换SVG to Base64 converter并选择输出：（CSS Background Image --background-image：url（））

赞(0）回复(0）举报 2023-05-02

我来回答

背景图像在iOS上与用户交互时 Flink [Ionic 5]

3条答案

相关问题

热门标签

最新问答