[4.0.x] page transition with full screen page background images issues

Bug Report

Ionic version: [x] 4.0.x

Current behavior: During the animation of page transitions, the full screen background is not animated, instead painted at once.

Expected behavior: I would expect to find a way to have a full screen background animate during page transition.

Steps to reproduce: See below sample code.

Related code: Sample app provided: https://github.com/olivermuc/pages-with-background-images

PageOne SCSS sample code (see also further info below):

:host {
    background: url(../../assets/imgs/page-one.jpg) no-repeat 0 0;
    background-size: cover;
    ion-header {
        backdrop-filter: none;
        ion-toolbar {
            --color: #fff;
            --border-width: 0;
            --background: none;
        }
    }
    ion-content {
        --color: #fff;
        --background: none;
    }
}

Other information: The above SCSS code was the last resort after having tried a myriad of ways to implement a full screen background without having to use <ion-content fullscreen>.

NB1 Btw I did try <ion-content fullscreen>and the results weren’t satisfying mostly bc of performance issues introduced by the use of CSS variables for dynamically changing the --background. This was the SCSS code I used for that:

    ion-content {
        --color: #fff;
        --background: url(../../assets/imgs/page-one.jpg) no-repeat 0 0;
        background-size: cover;
    }

The result even worse:

NB2: Animation is significantly better if I were to not use the background CSS var and instead provided a hardcoded background: ... command:

    ion-content {
        --color: #fff;
        --background:none;
        background: url(../../assets/imgs/page-two.jpg) no-repeat 0 0;
        background-size: cover;
    }

Result:

HOWEVER, as you can see, due to CSS scope I can only apply my custom background to the parent <ion-content> which doesn’t stretch across the entire page…a catch 22 situation.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.5.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.17
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.0.7
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.5, (and 5 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/oliver/Library/Android/sdk/)
   ios-deploy        : 1.9.4
   NodeJS            : v10.13.0 (/usr/local/Cellar/node@10/10.13.0_1/bin/node)
   npm               : 6.4.1
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

[SmirnovM91]

Hi, there is a problem with the ion-refresher and the NB2 solution, I can not see the refresher, but If I set “z-index: 1” to ion-refresher, the ion-refresher will look like on picture below

Do you have any ideas how to fix that?

[ionitron-bot[bot]]

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.