Ion-content background image flashing on newer iphones

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?


<ion-content forceOverscroll="false">
  <div class="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%);


May be related to:

This seems to be the fix:

ion-content {
  // Workaround for issue related to css varialbes
  // being recalculated with DOM changes
  &::part(background) {
    background: url('...') no-repeat center center / cover;

1 Like