fix(backdrop): use raf when adding/removing disable-scroll css

Author: adamdbradley

src/components/backdrop/backdrop.ts

@@ -1,5 +1,7 @@
-import {Directive, ViewEncapsulation, HostListener, ElementRef, Input} from '@angular/core';
-import {isTrueProperty} from '../../util/util';
+import { Directive, ElementRef, Input } from '@angular/core';
+
+import { isTrueProperty} from '../../util/util';
+import { nativeRaf} from '../../util/dom';
 
 const DISABLE_SCROLL = 'disable-scroll';
 
@@ -19,23 +21,24 @@ export class Backdrop {
 
   private static push() {
     if (this.nuBackDrops === 0) {
-      console.debug('adding .disable-scroll to body');
-      document.body.classList.add(DISABLE_SCROLL);
-    } else {
-      console.warn('several backdrops on screen? probably a bug');
+      nativeRaf(() => {
+        console.debug('adding .disable-scroll to body');
+        document.body.classList.add(DISABLE_SCROLL);
+      });
     }
     this.nuBackDrops++;
   }
 
   private static pop() {
-    if (this.nuBackDrops === 0) {
-      console.error('pop requires a push');
-      return;
-    }
-    this.nuBackDrops--;
-    if (this.nuBackDrops === 0) {
-      console.debug('removing .disable-scroll from body');
-      document.body.classList.remove(DISABLE_SCROLL);
+    if (this.nuBackDrops > 0) {
+      this.nuBackDrops--;
+
+      if (this.nuBackDrops === 0) {
+        nativeRaf(() => {
+          console.debug('removing .disable-scroll from body');
+          document.body.classList.remove(DISABLE_SCROLL);
+        });
+      }
     }
   }