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

[olivermuc]

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

[olivermuc]

Has anyone else tried to implement full screen image backgrounds?
Are there other options, I haven't covered?

[lcsoka]

Has anyone else tried to implement full screen image backgrounds?
Are there other options, I haven't covered?

Hi there,
I was struggling with the same problem. I fixed it temporarily by using your 'NB2' solution and then giving absolute position to the header
ion-header { position: absolute; }
and then setting the --padding-top css variable on the ion-content.

Also i'm using @ionic/angular: 4.0.0-rc.0

[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?

[SmirnovM91]

I found solution, just change background url to base64 instead of simple url, and image stops flashing

[olivermuc]

I found solution, just change background url to base64 instead of simple url, and image stops flashing

Base64 vs external image file has been discussed for years. While it may work better than with external files - in your use-case - it's generally not good solution for a number of reasons, but especially when it comes to larger fullscreen background images.

[olivermuc]

Has anyone else tried to implement full screen image backgrounds?
Are there other options, I haven't covered?

Hi there,
I was struggling with the same problem. I fixed it temporarily by using your 'NB2' solution and then giving absolute position to the header
ion-header { position: absolute; }
and then setting the --padding-top css variable on the ion-content.

Also i'm using @ionic/angular: 4.0.0-rc.0

This is partially the solution (at least allowing for a full screen image to be shown):
ion-header { position: absolute; }

However, using --padding-top doesn't work unless you intend to show the scrolling content behind the transparent header.

[olivermuc]

The ideal solution would be to pass on the background-image url to the ion-content web component, NOT using a css variable, which creates performance (slow) and visual issues (flickers on iOS).

[olivermuc]

Unfortunately it is still broken and even worse with v4.1.0.

[liamdebeasi]

Hi there,

I appreciate everyone's patience with this issue. We are actively looking into this issue, and will update you when we have more information.

Thanks!

[olivermuc]

Thanks @liamdebeasi for the heads up, that's great news.
Happy to support the solution finding process / testing, given my exposure in that particular area.

[liamdebeasi]

Hi @olivermuc,

I am noticing the background image flickering (known issue in WebKit, more here: #17494), but other than that, the background image appears to be animating as it should.

I am testing on the full-screen-background-on-ion-content branch. Which device/browser are you seeing this on?

Thanks!

[olivermuc]

@liamdebeasi I noticed the above reported issues on iOS (across devices, latest version).

Your workaround (to bypass the known webkit bug) is a nice one, and I can easily imagine that to be my choice of implementation, until Safari is fixed.

The benefit of doing it inside the controller is that one can still utilize the out of the box header/body padding logic and it doesn't require manipulating the --offset* variables to achieve a fullscreen display when applied directly to ion-content (previous workaround).

[ionitron-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.