Ionic4 blinking and delay on page transition

Ionic Framework
1

Hey guys! This is my first application using ionic4 and there is something weird happening. When I tap on any link, there is delay and the entire background blinks before it loads the page. Here is a video showing this weird behave: https://youtu.be/NqoOMQYyr4k

For reference, here is the code for the pages:

On the global.scss i have this property to setup the background

ion-content {
  --background: #000 url('./assets/images/main-bg.png') no-repeat center center / cover;
}

news.page.ts

import { News } from './news.model';
import { Component, OnInit } from '@angular/core';
import { NewsService } from '../services/news.service';
import { Router } from '@angular/router';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-news',
  templateUrl: './news.page.html',
  styleUrls: ['./news.page.scss'],
})
export class NewsPage implements OnInit {

  news: any;

  constructor(private newsService: NewsService, private router: Router, private navController: NavController) { }

  ngOnInit() {
    this.news = this.newsService.getAllEvents();
  }

  go(id: string) {
    this.navController.navigateForward('news/' + id);
  }
}

news.page.html

<ion-header>
  
  <ion-toolbar color="grey">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title style="color: #524A4A!important">News</ion-title>
  </ion-toolbar>
</ion-header>


<ion-content>
  <ion-grid padding class="margin-logo-header">
    <ion-row>
      <div>
        <h2>Noticias HD Friends</h2>
      </div>
    </ion-row>
  </ion-grid>


  <ion-card color="grey" *ngFor="let news of news | async">
    <ion-nav-pop (click)="go(news.id)" >
      <ion-img src="{{news.picture}}"></ion-img>
      <ion-card-header>
        <ion-card-title>{{ news.title }}</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>{{ news.subtitle }}</p>
      </ion-card-content>
    </ion-nav-pop>

  </ion-card>


</ion-content>

news.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { News } from '../news/news.model';

@Injectable({
  providedIn: 'root'
})
export class NewsService {

  NODE = 'news/';
  news: AngularFireList<News[]>;

  constructor(private db: AngularFireDatabase) { }

  getAllEvents() {
    const localNews = this.db.list(this.NODE);
    return localNews.valueChanges();
  }

  getNews(id: string) {
    return this.db.object(this.NODE + id);
  }
}

Is this a bug because it’s a beta or is this something I messed up?

Thanks guys

2

I have get this error too when using video background. And it blink more than your video which you sent.