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

Ionic Framework
1

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
2

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)

3

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 + ')' }">

1 Like
4

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"
5

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

6

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).

6 Likes
7

Try ion-content no-bounce

8

Thanks, @erkinalan its works fine.

SCSS
ion-content {
–background: no-repeat center center fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
background-size: 100%;
}

TS
backGroundImage: any;

constructor(private router: Router) {
this.backGroundImage = ‘…/…/…/assets/imgs/bg.png’;
}

HTML
<ion-content [ngStyle]="{ ‘background’: ‘url(’ + backGroundImage + ‘) no-repeat center center fixed’ }"
class="ion-padding " scroll-y=“false”>

1 Like
9

Worked for me but I also had to hardcode the background color instead of using the ionic variable

This works:

&::part(background) {
        background: url('../../assets/pictures/phoenix.png') no-repeat center center / cover, #2d2e36;
    }

This does not work

 &::part(background) {
        background: url('../../assets/pictures/phoenix.png') no-repeat center center / cover, var(--ion-color-background);
    }
1 Like
10

@sebaferreras
Thanks that fixed my issue.

How does this relate to Ionic apps?
If we using Ionic 5 are we all good or is this dependent on the version of iOS the iPhone is running?

11

Shadow Parts should be good, but check your analytics and ios version metrics.

iOS got shadow parts in ios 13.x. So that should cover a majority of iOS users.

12

@daivinod Thanks for posting, this looks like a promising solution but I am unable to get it to work. The HTML is clearly reading the path because if I mess it up it throws a 404 error, but the image itself isn’t displaying. Any thoughts? One thing I noticed is that in the constructor you setup (private router: Router) but that is grayed out in my code and isn’t used. Is that not part of this solution?

I also tried it programmatically in ts as laid out here: css - How to put image in both <ion-header> and <ion-content> in Ionic - Stack Overflow
This worked, but only for one page. I get into the ionViewWillEnter not firing in iOS bug (feature)(works great in the browser) when I try to set a different background image on another page. Hope this isn’t TMI but I’m at my wits end!

13

It appears this is broken for users with older versions of iOS <13 I guess, they just get a white background. Unfortunately my text was white also so it is unusable.

I’m currently looking for a solution to this.

Is there a way to test on older iOS versions somehow without uninstalling my current (latest) version of xcode?

14

The fix appears to be to keep the original --background as a fallback for <ios 13. I will update if this proves not to work.

81% of devices use iOS 13+ Ref: https://developer.apple.com/support/app-store/

ion-content{
  width: 100%;
  height: 100%;
  padding: 0;
  position: relative;
  --background: url("./../../../assets/img/login-bg.jpg") no-repeat fixed center / cover;
   // 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("./../../../assets/img/login-bg.jpg") no-repeat fixed center / cover;
  }
}
15

For me it was solved with:

Before:

export class LoginPage implements OnInit {

After:

export class LoginPage implements OnInit, AfterViewInit {

......
@ViewChild(IonContent, { static: true }) private pageIonContent: IonContent;

constructor(.....

…

 ngAfterViewInit() {
    this.pageIonContent.getScrollElement().then(scrollElement => {
      scrollElement.setAttribute('style', "background: url('/assets/img/background.jpg') no-repeat center center / cover");
    });
  }

Font 1

Font 2

1 Like
16

You can also create new div

<div class="background"></div>

then in .scss

.background { background: url('/assets/img/vuexy-login-bg.jpeg') no-repeat center center; background-size: cover !important; background-repeat: no-repeat !important; background-position: center; width: 100%; height: 100%; position: absolute; }

17

This works perfectly for me. Approving this method.

18

I read your question correctly and I told it to my elder brother https://forum.ionicframework.com/t/ios-ionic-5-angular-10eloto-9-page-is-flickering/183661/17
And I have shared it with my friends. As soon as I get the best answer, I will tell you here

Thanks