Toast notification flickr once before it disappear.

Dear Peter,

How can I reproduce this problem? Could you please provide me with some reproduction steps?

Without it, I won't be able to help you well.

Best Regards,

Damian

Hi Damian,

Here is our Notification Service...

notification.service.ts

import { Injectable } from '@angular/core';
import { ToastService, IndividualConfig, GlobalConfig } from 'ng-uikit-pro-standard';

@Injectable({
  providedIn: 'root'
})

export class NotificationService {

  private individualConfig: IndividualConfig;

  constructor(private toastrService: ToastService) {
    this.individualConfig  = new GlobalConfig();
    this.individualConfig.positionClass = "md-toast-bottom-left";
    this.individualConfig.toastClass = "toast-module-opacity";
  }

  success(message: string, title?: string | any): any {
    return this.toastrService.success(message, title, this.individualConfig);
  }

  error(message: string, title?: string | any): any {
    return this.toastrService.error(message, title, this.individualConfig);
  }

  info(message: string, title?: string | any): any {
    return this.toastrService.info(message, title, this.individualConfig);
  }

  warning(message: string, title?: string | any): any {
    return this.toastrService.warning(message, title, this.individualConfig);
  }

}

and styles.sccs

.toast-module-opacity {
    opacity: 1.0 !important;
}

which I simply call like this.

this.notificationService.success("Document successfully added!");

If we trigger this notification a couple of times the message will flickr once before it disappears (in Chrome).

Best Regards,

Peter

I have tried to reproduce it but without success.

Could you please send me a movie, where this problem is visible? Without it, I'm not able to help you well.

Best Regards,

Damian

Good Morning,

Here comes a short movie showing the problem.

Best Regards,

Peter

Peter, I'll investigate this, but yesterday I wasn't able to reproduce this problem on Chrome and Firefox.

On which version of Chrome this problem exists? Does it exist on Firefox or another browser? How with some another OS like Linux, MacOS or some other Windows?

The problem exists in our development environment where we use Windows 7 and Chrome "version 72.0.3626.119 (Officiell version) (64 bitar)".

The problem seems to not appear in our test environment where we use Windows 10 and Microsoft Edge 40.15063.674.0.

Dear Peter,

I have found the root of your problem.

Please overwrite your styles with the below styles, and there should be no more than the strange blinking effect in the toast:

.toast-module-opacity {
  opacity: 1 !important;
}

#toast-container > mdb-toast-component.toast-module-opacity, #toast-container > mdb-toast-component.toast-module-opacity > div {
  opacity: 1 !important;
}

Best Regards,

Damian

Many thanks Damian, it seems to work now :)