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

Ionic Framework
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