Ionic-framework: Page is flickering if the ion-content is set with background image

[roopeshreddy]

Bug Report

Ionic version:
4.0.0

Current behavior:
If a page has background image set to ion-content, then while navigating to that page is flickering.

Expected behavior:
Flickering should not happen.

Steps to reproduce:
Create a page with ion-content set with background-image like below -

ion-content { --background: url('./../../../assets/images/ica-slidebox-img-1.png') no-repeat 50% 10%; }

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.9.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.1
   @angular-devkit/schematics    : 7.2.1
   @angular/cli                  : 7.2.3
   @ionic/angular-toolkit        : 1.2.1

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 8 other plugins)

System:

   ios-deploy : 1.9.4
   ios-sim    : 7.0.0
   NodeJS     : v10.15.0 (/usr/local/bin/node)
   npm        : 6.5.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B61

NOTE: We have tried with 4.0.1 release as well and it's the same!

[SmirnovM91]

Try to use base64 instead of url

[liamdebeasi]

Hi there,

Thanks for opening an issue with us! Would you be able to provide a repository with the code required to reproduce this issue? Also, which browser(s) or device(s) are you seeing this issue on?

Thanks for using Ionic!

[roopeshreddy]

Try to use base64 instead of url

No, still the same issue. We tried .png, .jpg. Converting it to base64 of both the formats and still the same issue!

[SmirnovM91]

try to use webview 3.1.2 and base64

[SmirnovM91]

or this solution
ion-content { --color: #fff; --background:none; background: url(../../assets/imgs/bg.jpg) no-repeat 0 0; background-size: cover; }

[roopeshreddy]

or this solution

ion-content {
      --color: #fff;
      --background:none;
      background: url(../../assets/imgs/bg.jpg) no-repeat 0 0;
      background-size: cover;
  }

Yes If we set the background-size: cover then no flicker else, we are seeing the flicker.

We tried with any other property to the background-size, then flicker is back!

[SmirnovM91]

Have you tried to use webview 3.1.2?

[roopeshreddy]

Hi there,

Thanks for opening an issue with us! Would you be able to provide a repository with the code required to reproduce this issue? Also, which browser(s) or device(s) are you seeing this issue on?

Thanks for using Ionic!

HI @liamdebeasi I've created a demo of the issue - https://github.com/roopeshreddy/flicker-issue

It happens on the web as well as iOS simulator & device.

[roopeshreddy]

Have you tried to use webview 3.1.2?

I'm not sure whether we can set the webview. By default Ionic uses WkWebview right. Is there any option to set it?

[SmirnovM91]

Try to use this
https://github.com/ionic-team/cordova-plugin-ionic-webview/blob/master/README.md#migrating-to-3x

[SmirnovM91]

That link is for migration from 2 to 3 version of wkwebview, I use ionic 4 and webview 3.1.2, and this works

[SmirnovM91]

You need to do only the 1st and the 4th steps

[roopeshreddy]

That link is for migration from 2 to 3 version of wkwebview, I use ionic 4 and webview 3.1.2, and this works

I tried it and the issue still exists for us!
`
Ionic:

ionic (Ionic CLI) : 4.9.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0
@angular-devkit/build-angular : 0.12.1
@angular-devkit/schematics : 7.2.1
@angular/cli : 7.2.3
@ionic/angular-toolkit : 1.2.1

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 8 other plugins)

System:

ios-deploy : 1.9.4
ios-sim : 7.0.0
NodeJS : v10.15.0 (/usr/local/bin/node)
npm : 6.5.0
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61

on-content {
--background: none;
background: url('./../../../assets/images/ica-slidebox-img-1.png');
background-size: cover;
}
`

[liamdebeasi]

Hi @roopeshreddy,

I'm able to reproduce the issue using the code you provided. We will look into it! 🙂

[SmirnovM91]

Have you tried now use base64 with wkwebview 3.1.2?

[roopeshreddy]

Have you tried now use base64 with wkwebview 3.1.2?

Still the same!

[olivermuc]

See here as well:
https://github.com/ionic-team/ionic/issues/16678

[olivermuc]

Unfortunately v4.1.1 breaks even the above workaround.

[liamdebeasi]

Linking similar issue: https://github.com/ionic-team/ionic/issues/17728

[jayordway]

I have this issue with the background image and transition flicker as well. There is no flicker if I disable the shadow DOM with ViewEncapsulation.None.

[nerdic-coder]

I also have the same issue with my Angular/Ionic project. Using Ionic 4.1.2.

[jayordway]

I was noticing this issue with version 4.2.0 but the view I was transitioning to had ViewEncapsulation.None, when I enabled the shadow DOM and removed that for the second page the flicker went away.

[konnectappdev]

@jayordway Did you add encapsulation: ViewEncapsulation.None, to resolve this issue or did you remove it ?

[jayordway]

I removed only from the page I was moving to, so added the shadow DOM back to the target page and then the flicker went away.

[EnzoDLP]

Any update on this issue ? I have the same problem

[tmk1991]

Same thing happens if you have an image as the background to an ion-card in iOS

[liamdebeasi]

Hi there,

This appears to be a known issue in WebKit where DOM changes cause WebKit to recalculate CSS variables. As a result, this is causing the background image flickering that is being noted in this thread.

There are 2 options for workarounds:

1. Use a base64 encoded image instead (this may or may not be acceptable for your use case -- likely only useful for small icons/images)
2. Apply the background image via JS:

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

...

const content = document.querySelector('#my-ion-content');
const innerScroll = content.shadowRoot.querySelector('.inner-scroll');

this.domCtrl.write(() => {
  (innerScroll as any).style.background = "url('../../assets/image.png') no-repeat center center";
});

Using the write method on the DomController wraps the code in a requestAnimationFrame call, which should ensure that setting the background does not produce much jank.

I am going to close this issue as it is not an Ionic Framework bug. You can follow the progress of the WebKit bug here: https://bugs.webkit.org/show_bug.cgi?id=195628.

We appreciate your patience as we investigated this issue!

[dromedaryCase]

Hmmm this doesn't work: Property 'style' does not exist on type 'Element'.

But this works:
innerScroll.setAttribute('style', 'background: url("../../assets/image.png") center center / contain no-repeat');

[liamdebeasi]

Ah yeah setAttribute is the "more correct" way of doing it. For the original example you can probably just typecast innerScroll as any (updated the original comment).

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.