Background image blinks on navigation iOS
See original GitHub issueBug Report
Current behavior:
When using background image, the whole background blinks upon tapping on a link (navigation) and there is a delay on the response.
The code I’m using the setup the background is on the .scss file referent to the page that I want the background to be displayed.
:host { ion-content { --background: url('../../assets/images/main-bg@2x.png'); } }
I have also a video to better demonstrate the issue: https://www.youtube.com/watch?v=NqoOMQYyr4k
This only happens on iOS. Using the web works well. Apparently on Android is working fine as well.
Expected behavior: It should quickly navigate to the next page without the background blinking and response delay.
Ionic info:
Ionic:
ionic (Ionic CLI) : 4.5.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.16
@angular-devkit/build-angular : 0.10.7
@angular-devkit/schematics : 7.0.7
@angular/cli : 7.0.7
@ionic/angular-toolkit : 1.2.0
Capacitor:
capacitor (Capacitor CLI) : 1.0.0-beta.11
@capacitor/core : 1.0.0-beta.11
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.0, (and 4 other plugins)
System:
ios-deploy : 1.9.4
NodeJS : v8.12.0 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61
Issue Analytics
- State:
- Created 5 years ago
- Comments:9 (1 by maintainers)
Top Results From Across the Web
Background image blinks on navigation iOS #16639 - GitHub
Current behavior: When using background image, the whole background blinks upon tapping on a link (navigation) and there is a delay on the ......
Read more >Background image flickering with user interaction on iOS ...
Here is a working solution for having different images for both Web and mobile views with no flash. import { DomController } from...
Read more >Ion-content background image flashing on newer iphones
0 Current behavior: If a page has background image set to ion-content, then while navigating to that page is flickering. Expected behavior: ...
Read more >[Solved]-Background image flickering issue on scroll in iOS 8
Coding example for the question Background image flickering issue on scroll in iOS 8.
Read more >React navigation V6 white flash when navigating screens
I think setting up the background color of the navigation container theme should minimize this effect. By default it is white as defined...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thanks man, but it didn’t work for me 😦 On iOS the background still blinks 😦 I’ll wait to see if there is going to be a fix for the GM.
Thank you so much thou! I really appreciate your help
Cheers,
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.