fix(overlay): wrap class addition in RAF #9882

IgniteUI · Oct 7, 2021 · d019881 · d019881
1 parent 50d4ccb
commit d019881
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts
@@ -111,7 +111,7 @@ export class IgxOverlayService implements OnDestroy {
      * }
      * ```
      */
-     public contentAppended = new EventEmitter<OverlayEventArgs>();
+    public contentAppended = new EventEmitter<OverlayEventArgs>();
 
     /**
      * Emitted just before the overlay animation start.
@@ -707,7 +707,9 @@ export class IgxOverlayService implements OnDestroy {
         //  to eliminate flickering show the element just before animation start
         info.wrapperElement.style.visibility = '';
         info.visible = true;
-        this.addModalClasses(info);
+        requestAnimationFrame(() => {
+            this.addModalClasses(info);
+        });
         info.openAnimationPlayer.play();
     }
 
@@ -923,7 +925,7 @@ export class IgxOverlayService implements OnDestroy {
         }
     }
 
-    private openAnimationDone(info: OverlayInfo){
+    private openAnimationDone(info: OverlayInfo) {
         this.opened.emit({ id: info.id, componentRef: info.componentRef });
         if (info.openAnimationPlayer) {
             info.openAnimationPlayer.reset();
@@ -939,7 +941,7 @@ export class IgxOverlayService implements OnDestroy {
         }
     }
 
-    private closeAnimationDone(info: OverlayInfo){
+    private closeAnimationDone(info: OverlayInfo) {
         this.closeDone(info);
         if (info.closeAnimationPlayer) {
             info.closeAnimationPlayer.reset();