[iOS] [Ionic 5] [Angular 9] Page is flickering

Hello,
I’m setting the background of ion-content via css and I noticed that the page is flickering.

.background-page {
  --background: url('/assets/imgs/background.jpg') no-repeat center center fixed; 
    background-size: cover;
}

I saw issues on ionic Github, they put some code via Js but it didn’t work for me.

const content = document.querySelector('ion-content');
      const innerScroll = content.shadowRoot.querySelector('.inner-scroll');
      this.domCtrl.write(() => {
        (innerScroll as any).setAttribute('style', '--background: url("../../assets/imgs/background.jpg") center center / contain no-repeat');
      });

Link github issues:


**Ionic/Angular:**

   ionic (Ionic CLI)             : 6.1.0
   Ionic Framework           : @ionic/angular 5.0.0
   Angular                         : 9.0.1         

**Cordova:**

   cordova (Cordova CLI) : 8.1.2
   Cordova Platforms     : iOS 5.1.1

**System:**

   NodeJS     : v12.14.1
   npm        : 6.13.4
   OS         : macOS Catalina
   Xcode      : Xcode 11

Hey @webteambel did you find any working solution for this? I’ve also tried via JS, but it wasn’t working for me neither. And If I leave it with css the screen is flickering/flashing if i ran on iOS device (or Safari, or anything related with iOS. On Android is running well)

You can use like this:

in .ts file:

backGroundImage:any;

this.backGroundImage = "../../assets/imgs/background.jpg";

in .html file:

<ion-content [ngStyle]="{ 'background-image': 'url(' + backGroundImage + ')' }">

Hi,
For now I just converted the image to base 64 then I created a css class:

.background-page {
  --background: url('data:image/jpeg;base64,/9j/......);
}

and I call it

<ion-content fullscreen class="ion-padding background-page"

Thanks, it worked for me , at least the flickering effect is gone. But, I have to ask you guys another question, maybe you can help me out.
On iOS device (it’s an iPhone 6s) I have an issue with the bouncing effect when I am testing (building out the app, and running from xCode on a connected device), I can’t disable the bounce from top to bottom and bottom to top, neither in ion-content nor in config.xml. I tried a lot of “tricks”. None of them worked.
FYI.: I updated everything, angular, ionic, ionic cli, dependencies (some of them had to be updated manually).

Thanks

Both Github issues have been locked so it’s not possible to add this comment there, but anyways…

Just in case if this could help some other devs, another option is to use CSS Shadow Parts since the content exposes the background in that way.

ion-content {
  // Workaround for issue related to css varialbes
  // being recalculated with DOM changes
  // https://github.com/ionic-team/ionic-framework/issues/17494
  // https://github.com/ionic-team/ionic-framework/issues/16678
  &::part(background) {
    background: url('...') no-repeat center center / cover;
  }

  ...
  ...
}

Both the background and the scroll CSS Shadow Parts have been added to the docs: https://ionicframework.com/docs/api/content#css-shadow-parts

Important: Please double-check browser compatibility before using CSS Shadow Parts in your app as it is not supported in Safari iOS 13.3 and below (https://developer.mozilla.org/en-US/docs/Web/CSS/::part).

2 Likes

Try ion-content no-bounce