ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.02k stars 13.51k forks source link

Background image blinks on navigation iOS #16639

Closed iconio closed 4 years ago

iconio commented 5 years ago

Bug 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
n0490b commented 5 years ago

I'm also having the same problem

duyetnk commented 5 years ago

may be because of page transition effect, i use custom page transition so no problem.

iconio commented 5 years ago

may be because of page transition effect, i use custom page transition so no problem.

Hey @duyetnk could you post an example of that custom transition?

thanks

duyetnk commented 5 years ago

Here you are: https://github.com/ionic-team/ionic/issues/16829#issuecomment-448910537

iconio commented 5 years ago

Here you are: #16829 (comment)

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,

iconio commented 5 years ago

Any updates?

SmirnovM91 commented 5 years ago

+1

liamdebeasi commented 4 years ago

Thanks for the issue. I am going to close this as this is a known bug in WebKit. Please see my comment here for a workaround: https://github.com/ionic-team/ionic/issues/17494#issuecomment-492647992

ionitron-bot[bot] commented 4 years ago

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.