Ion-content background image flashing on newer iphones

Ionic Framework ionic-v3
1

I originally wrote this code a over a year ago. Now it causes a fullscreen white flashing of the background when the screen is touched anywhere (textbox or background) if used with iPhone X or later, I tried it on an iPhone 8 and it actually does the same thing but with black so it is nowhere near as bad.

Any suggestions from the Ionic hive mind?

Code:


<ion-content forceOverscroll="false">
  <div class="content">

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

.content {
  background:  linear-gradient(to bottom, rgb(0 0 0 / 0.5) 0%, rgba(125, 232, 130, 0) 40%);
}

EDIT:

May be related to:

https://bugs.webkit.org/show_bug.cgi?id=195628

2

This seems to be the fix:

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

  ...
  ...
}
1 Like