question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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. page-transition

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: page-transition2

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: page-transition3

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:13 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
SmirnovM91commented, Feb 13, 2019

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 simulator screen shot - iphone 7 - 2019-02-13 at 18 41 07

Do you have any ideas how to fix that?

0reactions
ionitron-bot[bot]commented, Jun 17, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Perfect Full Page Background Image - CSS-Tricks
The goal here is a background image on a website that covers the entire browser window at all times. Let's put some specifics...
Read more >
full page image with animated transition - Stack Overflow
I am trying to make a fade in- fade out transition between two pages with full screen images. Currently I'm trying to achieve...
Read more >
Fullscreen Background Image Slideshow with CSS3 - Codrops
Today we will create a CSS-only fullscreen background image slideshow. We'll create different image transitions and also make a title appear ...
Read more >
background-repeat - CSS: Cascading Style Sheets | MDN
The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and ...
Read more >
Full Screen Background Image with HTML CSS - YouTube
Learn how to make a Full - Screen Background Image with HTML and CSS. In this video, you're going to learn how to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found