# Ion-content background image flashing on newer iphones

**URL:** <https://forum.ionicframework.com/t/ion-content-background-image-flashing-on-newer-iphones/200926>\
**Category:** ionic-v3\
**Created:** [December 9, 2020, 2:53am UTC](https://forum.ionicframework.com/t/ion-content-background-image-flashing-on-newer-iphones/200926 "2020-12-09T02:53:45Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![wekas](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/wekas/32/124745_2.png) [@wekas](https://forum.ionicframework.com/u/wekas)\
**Post date:** [December 9, 2020, 2:53am UTC](https://forum.ionicframework.com/t/ion-content-background-image-flashing-on-newer-iphones/200926/1 "2020-12-09T02:53:45Z")

</div>

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.

[![](https://global.discourse-cdn.com/ionicframework/original/3X/9/5/956f8cee948899811553564546187d9d0f04c1d6.jpeg "IMG 1555") ](https://www.youtube.com/watch?v=Nk087SvbjAE)

Any suggestions from the Ionic hive mind?

Code:

```auto

<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://github.com/ionic-team/ionic-framework/issues/17494#issuecomment-492647992>
>
> \# Bug Report
> 
> \*\*Ionic version:\*\*
> 4.0.0
> 
> \*\*Current behavior:\*\*
> If a page ha…s 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!

[https://bugs.webkit.org/show\_bug.cgi?id=195628](https://bugs.webkit.org/show_bug.cgi?id=195628)

---

<div class="post-metadata">

**Author:** ![wekas](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/wekas/32/124745_2.png) [@wekas](https://forum.ionicframework.com/u/wekas)\
**Post date:** [December 9, 2020, 4:04am UTC](https://forum.ionicframework.com/t/ion-content-background-image-flashing-on-newer-iphones/200926/2 "2020-12-09T04:04:59Z")

</div>

This seems to be the fix:

> [@\[iOS\] \[Ionic 5\] \[Angular 9\] Page is flickering](https://forum.ionicframework.com/t/ios-ionic-5-angular-9-page-is-flickering/183661/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](https://ionicframework.com/blog/customize-your-ionic-framework-app-with-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) …

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

  ...
  ...
}

```