From b05eaeb85ba45eef0f23eccbeea302b86ea3b744 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.mtza@gmail.com>
Date: Tue, 20 Feb 2018 15:00:52 +0100
Subject: [PATCH] fix(backdrop): device support

---
 packages/core/src/components.d.ts             |  4 +-
 .../components/action-sheet/action-sheet.scss |  2 +
 .../components/action-sheet/action-sheet.tsx  | 11 +--
 .../action-sheet/animations/ios.enter.ts      |  2 +-
 .../action-sheet/animations/ios.leave.ts      |  2 +-
 .../action-sheet/animations/md.enter.ts       |  2 +-
 .../action-sheet/animations/md.leave.ts       |  2 +-
 packages/core/src/components/alert/alert.scss |  2 +
 packages/core/src/components/alert/alert.tsx  | 13 ++--
 .../components/alert/animations/ios.enter.ts  |  2 +-
 .../components/alert/animations/ios.leave.ts  |  2 +-
 .../components/alert/animations/md.enter.ts   |  2 +-
 .../components/alert/animations/md.leave.ts   |  2 +-
 .../src/components/backdrop/backdrop.scss     | 15 +++-
 .../core/src/components/backdrop/backdrop.tsx | 47 ++++++++++--
 .../core/src/components/backdrop/readme.md    | 31 ++++++--
 .../loading/animations/ios.enter.ts           |  2 +-
 .../loading/animations/ios.leave.ts           |  2 +-
 .../components/loading/animations/md.enter.ts |  2 +-
 .../components/loading/animations/md.leave.ts |  2 +-
 .../src/components/loading/loading.ios.scss   |  4 -
 .../components/loading/loading.ios.vars.scss  |  3 -
 .../src/components/loading/loading.md.scss    |  4 -
 .../components/loading/loading.md.vars.scss   |  3 -
 .../core/src/components/loading/loading.scss  | 26 +------
 .../core/src/components/loading/loading.tsx   | 20 ++---
 packages/core/src/components/menu/menu.tsx    | 10 ++-
 .../src/components/menu/test/basic/index.html | 17 +++++
 .../components/modal/animations/ios.enter.ts  |  2 +-
 .../components/modal/animations/ios.leave.ts  |  2 +-
 .../components/modal/animations/md.enter.ts   |  2 +-
 .../components/modal/animations/md.leave.ts   |  2 +-
 .../core/src/components/modal/modal.ios.scss  |  4 -
 .../src/components/modal/modal.ios.vars.scss  |  3 -
 .../core/src/components/modal/modal.md.scss   |  3 -
 .../src/components/modal/modal.md.vars.scss   |  3 -
 packages/core/src/components/modal/modal.scss | 26 +------
 packages/core/src/components/modal/modal.tsx  | 57 +++++++-------
 packages/core/src/components/nav/nav.tsx      |  3 +-
 .../components/picker/animations/ios.enter.ts |  2 +-
 .../components/picker/animations/ios.leave.ts |  2 +-
 .../core/src/components/picker/picker.tsx     | 29 +++-----
 .../popover/animations/ios.enter.ts           |  2 +-
 .../popover/animations/ios.leave.ts           |  2 +-
 .../components/popover/animations/md.enter.ts |  2 +-
 .../components/popover/animations/md.leave.ts |  2 +-
 .../src/components/popover/popover.ios.scss   |  4 -
 .../src/components/popover/popover.md.scss    |  4 -
 .../components/popover/popover.md.vars.scss   |  3 -
 .../core/src/components/popover/popover.scss  | 23 ------
 .../core/src/components/popover/popover.tsx   | 74 +++++++++----------
 51 files changed, 221 insertions(+), 271 deletions(-)

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index f333349148..e3c525107e 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -342,7 +342,9 @@ declare global {
   }
   namespace JSXElements {
     export interface IonBackdropAttributes extends HTMLAttributes {
-      mode?: 'ios' | 'md';
+      stopPropagation?: boolean;
+      tappable?: boolean;
+      visible?: boolean;
     }
   }
 }
diff --git a/packages/core/src/components/action-sheet/action-sheet.scss b/packages/core/src/components/action-sheet/action-sheet.scss
index b72eaf8526..75c8f47eaa 100644
--- a/packages/core/src/components/action-sheet/action-sheet.scss
+++ b/packages/core/src/components/action-sheet/action-sheet.scss
@@ -13,6 +13,8 @@ ion-action-sheet {
   width: $action-sheet-width;
   height: $action-sheet-width;
 
+  touch-action: none;
+
   font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased;
 }
diff --git a/packages/core/src/components/action-sheet/action-sheet.tsx b/packages/core/src/components/action-sheet/action-sheet.tsx
index 6fba5bb936..f821d08170 100644
--- a/packages/core/src/components/action-sheet/action-sheet.tsx
+++ b/packages/core/src/components/action-sheet/action-sheet.tsx
@@ -195,10 +195,9 @@ export class ActionSheet {
     this.dismiss();
   }
 
-  protected backdropClick() {
-    if (this.enableBackdropDismiss) {
-      this.dismiss();
-    }
+  @Listen('ionBackdropTap')
+  protected onBackdropTap() {
+    this.dismiss();
   }
 
   protected buttonClick(button: ActionSheetButton) {
@@ -238,9 +237,7 @@ export class ActionSheet {
     const buttons = allButtons.filter(b => b.role !== 'cancel');
 
     return [
-      <ion-backdrop
-        onClick={this.backdropClick.bind(this)}
-        class='action-sheet-backdrop'></ion-backdrop>,
+      <ion-backdrop tappable={this.enableBackdropDismiss}/>,
       <div class='action-sheet-wrapper' role='dialog'>
         <div class='action-sheet-container'>
           <div class='action-sheet-group'>
diff --git a/packages/core/src/components/action-sheet/animations/ios.enter.ts b/packages/core/src/components/action-sheet/animations/ios.enter.ts
index 3c41698b35..c0125e53a1 100644
--- a/packages/core/src/components/action-sheet/animations/ios.enter.ts
+++ b/packages/core/src/components/action-sheet/animations/ios.enter.ts
@@ -7,7 +7,7 @@ export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElem
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.action-sheet-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
 
   const wrapperAnimation = new Animation();
   wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
diff --git a/packages/core/src/components/action-sheet/animations/ios.leave.ts b/packages/core/src/components/action-sheet/animations/ios.leave.ts
index 6c9ed010d6..5392c3add2 100644
--- a/packages/core/src/components/action-sheet/animations/ios.leave.ts
+++ b/packages/core/src/components/action-sheet/animations/ios.leave.ts
@@ -7,7 +7,7 @@ export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElem
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.action-sheet-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
 
   const wrapperAnimation = new Animation();
   wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
diff --git a/packages/core/src/components/action-sheet/animations/md.enter.ts b/packages/core/src/components/action-sheet/animations/md.enter.ts
index 8fa81f3113..5c1a68c27b 100644
--- a/packages/core/src/components/action-sheet/animations/md.enter.ts
+++ b/packages/core/src/components/action-sheet/animations/md.enter.ts
@@ -8,7 +8,7 @@ export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLEleme
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.action-sheet-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
 
   const wrapperAnimation = new Animation();
   wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
diff --git a/packages/core/src/components/action-sheet/animations/md.leave.ts b/packages/core/src/components/action-sheet/animations/md.leave.ts
index ec6da1178b..b392a519ff 100644
--- a/packages/core/src/components/action-sheet/animations/md.leave.ts
+++ b/packages/core/src/components/action-sheet/animations/md.leave.ts
@@ -7,7 +7,7 @@ export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLEleme
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.action-sheet-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
 
   const wrapperAnimation = new Animation();
   wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
diff --git a/packages/core/src/components/alert/alert.scss b/packages/core/src/components/alert/alert.scss
index 4d365c269b..3f78f064b9 100644
--- a/packages/core/src/components/alert/alert.scss
+++ b/packages/core/src/components/alert/alert.scss
@@ -15,6 +15,8 @@ ion-alert {
   align-items: center;
   justify-content: center;
 
+  touch-action: none;
+
   contain: strict;
 
   font-smoothing: antialiased;
diff --git a/packages/core/src/components/alert/alert.tsx b/packages/core/src/components/alert/alert.tsx
index 2f8f44e835..7991b081c9 100644
--- a/packages/core/src/components/alert/alert.tsx
+++ b/packages/core/src/components/alert/alert.tsx
@@ -1,4 +1,4 @@
-import { Component, CssClassMap, Element, Event, EventEmitter, Method, Prop } from '@stencil/core';
+import { Component, CssClassMap, Element, Event, EventEmitter, Method, Prop, Listen } from '@stencil/core';
 import { Animation, AnimationBuilder, AnimationController, Config, DomController, OverlayDismissEvent, OverlayDismissEventDetail } from '../../index';
 import { domControllerAsync, playAnimationAsync } from '../../utils/helpers';
 
@@ -204,10 +204,9 @@ export class Alert {
     this.ionAlertDidUnload.emit();
   }
 
-  protected backdropClick() {
-    if (this.enableBackdropDismiss) {
-      this.dismiss(null, BACKDROP);
-    }
+  @Listen('ionBackdropTap')
+  protected onBackdropTap() {
+    this.dismiss(null, BACKDROP);
   }
 
   rbClick(inputIndex: number) {
@@ -419,9 +418,7 @@ export class Alert {
     this.inputType = inputTypes.length > 0 ? inputTypes[0] : null;
 
     return [
-      <ion-backdrop
-        onClick={this.backdropClick.bind(this)}
-        class='alert-backdrop'></ion-backdrop>,
+      <ion-backdrop tappable={this.enableBackdropDismiss}/>,
       <div class='alert-wrapper'>
         <div class='alert-head'>
           {this.title
diff --git a/packages/core/src/components/alert/animations/ios.enter.ts b/packages/core/src/components/alert/animations/ios.enter.ts
index a1dd2266e9..85384497e6 100644
--- a/packages/core/src/components/alert/animations/ios.enter.ts
+++ b/packages/core/src/components/alert/animations/ios.enter.ts
@@ -7,7 +7,7 @@ export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElem
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.alert-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
 
   const wrapperAnimation = new Animation();
   wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
diff --git a/packages/core/src/components/alert/animations/ios.leave.ts b/packages/core/src/components/alert/animations/ios.leave.ts
index c68e2d0340..bf38c0180f 100644
--- a/packages/core/src/components/alert/animations/ios.leave.ts
+++ b/packages/core/src/components/alert/animations/ios.leave.ts
@@ -7,7 +7,7 @@ export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElem
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.alert-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
 
   const wrapperAnimation = new Animation();
   wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
diff --git a/packages/core/src/components/alert/animations/md.enter.ts b/packages/core/src/components/alert/animations/md.enter.ts
index c7376069fe..7905cc26e2 100644
--- a/packages/core/src/components/alert/animations/md.enter.ts
+++ b/packages/core/src/components/alert/animations/md.enter.ts
@@ -7,7 +7,7 @@ export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLEleme
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.alert-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
 
   const wrapperAnimation = new Animation();
   wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
diff --git a/packages/core/src/components/alert/animations/md.leave.ts b/packages/core/src/components/alert/animations/md.leave.ts
index 924fb3f4bb..872bb90649 100644
--- a/packages/core/src/components/alert/animations/md.leave.ts
+++ b/packages/core/src/components/alert/animations/md.leave.ts
@@ -7,7 +7,7 @@ export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLEleme
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.alert-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
 
   const wrapperAnimation = new Animation();
   wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
diff --git a/packages/core/src/components/backdrop/backdrop.scss b/packages/core/src/components/backdrop/backdrop.scss
index 7d88292566..a83baf1647 100644
--- a/packages/core/src/components/backdrop/backdrop.scss
+++ b/packages/core/src/components/backdrop/backdrop.scss
@@ -13,12 +13,19 @@ ion-backdrop {
   width: 100%;
   height: 100%;
 
+  cursor: pointer;
   opacity: .01;
   transform: translateZ(0);
 
-  contain: strict;
-}
+  touch-action: none;
 
-ion-backdrop.backdrop-no-tappable {
-  cursor: auto;
+  contain: strict;
+
+  &.backdrop-hide {
+    background: transparent;
+  }
+
+  &.backdrop-no-tappable {
+    cursor: auto;
+  }
 }
diff --git a/packages/core/src/components/backdrop/backdrop.tsx b/packages/core/src/components/backdrop/backdrop.tsx
index dbbe5d8b61..c9d998650f 100644
--- a/packages/core/src/components/backdrop/backdrop.tsx
+++ b/packages/core/src/components/backdrop/backdrop.tsx
@@ -1,4 +1,5 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, Listen, EventEmitter, Event, Prop } from '@stencil/core';
+import { now } from '../../utils/helpers';
 
 @Component({
   tag: 'ion-backdrop',
@@ -11,10 +12,44 @@ import { Component, Prop } from '@stencil/core';
   }
 })
 export class Backdrop {
-  /**
-   * The mode determines which platform styles to use.
-   * Possible values are: `"ios"` or `"md"`.
-   */
-  @Prop() mode: 'ios' | 'md';
 
+  private lastClick = -10000;
+
+  @Prop() visible = true;
+  @Prop() tappable = true;
+  @Prop() stopPropagation = true;
+
+  @Event() ionBackdropTap: EventEmitter;
+
+  @Listen('touchstart', {passive: false, capture: true})
+  protected onTouchStart(ev: TouchEvent) {
+    this.lastClick = now(ev);
+    this.emitTap(ev);
+  }
+
+  @Listen('mousedown', {passive: false, capture: true})
+  protected onMouseDown(ev: TouchEvent) {
+    if(this.lastClick < now(ev) - 2500) {
+      this.emitTap(ev);
+    }
+  }
+
+  private emitTap(ev: Event) {
+    if(this.stopPropagation) {
+      ev.preventDefault();
+      ev.stopPropagation();
+    }
+    if (this.tappable) {
+      this.ionBackdropTap.emit();
+    }
+  }
+
+  hostData() {
+    return {
+      class: {
+        'backdrop-hide': !this.visible,
+        'backdrop-no-tappable': !this.tappable,
+      }
+    };
+  }
 }
diff --git a/packages/core/src/components/backdrop/readme.md b/packages/core/src/components/backdrop/readme.md
index c6baf4c906..8fc7a01f4e 100644
--- a/packages/core/src/components/backdrop/readme.md
+++ b/packages/core/src/components/backdrop/readme.md
@@ -12,22 +12,41 @@ Backdrops are full screen components that overlay other components. They are use
 
 ## Properties
 
-#### mode
+#### stopPropagation
+
+boolean
 
 
+#### tappable
 
-The mode determines which platform styles to use.
-Possible values are: `"ios"` or `"md"`.
+boolean
+
+
+#### visible
+
+boolean
 
 
 ## Attributes
 
-#### mode
+#### stop-propagation
+
+boolean
 
 
+#### tappable
 
-The mode determines which platform styles to use.
-Possible values are: `"ios"` or `"md"`.
+boolean
+
+
+#### visible
+
+boolean
+
+
+## Events
+
+#### ionBackdropTap
 
 
 
diff --git a/packages/core/src/components/loading/animations/ios.enter.ts b/packages/core/src/components/loading/animations/ios.enter.ts
index d2dd02a7c5..e8990bf4c2 100644
--- a/packages/core/src/components/loading/animations/ios.enter.ts
+++ b/packages/core/src/components/loading/animations/ios.enter.ts
@@ -8,7 +8,7 @@ export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElem
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.loading-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
 
   const wrapperAnimation = new Animation();
   wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
diff --git a/packages/core/src/components/loading/animations/ios.leave.ts b/packages/core/src/components/loading/animations/ios.leave.ts
index 8f1298201f..55f5559d98 100644
--- a/packages/core/src/components/loading/animations/ios.leave.ts
+++ b/packages/core/src/components/loading/animations/ios.leave.ts
@@ -8,7 +8,7 @@ export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElem
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.loading-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
 
   const wrapperAnimation = new Animation();
   wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
diff --git a/packages/core/src/components/loading/animations/md.enter.ts b/packages/core/src/components/loading/animations/md.enter.ts
index e7bc14334a..5816a91744 100644
--- a/packages/core/src/components/loading/animations/md.enter.ts
+++ b/packages/core/src/components/loading/animations/md.enter.ts
@@ -7,7 +7,7 @@ export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLEleme
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.loading-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
 
   const wrapperAnimation = new Animation();
   wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
diff --git a/packages/core/src/components/loading/animations/md.leave.ts b/packages/core/src/components/loading/animations/md.leave.ts
index f911fccc38..4d09d63c91 100644
--- a/packages/core/src/components/loading/animations/md.leave.ts
+++ b/packages/core/src/components/loading/animations/md.leave.ts
@@ -7,7 +7,7 @@ export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLEleme
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.loading-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
 
   const wrapperAnimation = new Animation();
   wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
diff --git a/packages/core/src/components/loading/loading.ios.scss b/packages/core/src/components/loading/loading.ios.scss
index 6a918f5644..e989dc9e37 100644
--- a/packages/core/src/components/loading/loading.ios.scss
+++ b/packages/core/src/components/loading/loading.ios.scss
@@ -1,10 +1,6 @@
 @import "./loading";
 @import "./loading.ios.vars";
 
-.loading-backdrop-ios {
-  background-color: $loading-backdrop-ios-color;
-}
-
 // iOS Loading Indicator
 // --------------------------------------------------
 
diff --git a/packages/core/src/components/loading/loading.ios.vars.scss b/packages/core/src/components/loading/loading.ios.vars.scss
index 22f0fdad6c..495dcfa401 100644
--- a/packages/core/src/components/loading/loading.ios.vars.scss
+++ b/packages/core/src/components/loading/loading.ios.vars.scss
@@ -3,9 +3,6 @@
 // iOS Loading Indicator
 // --------------------------------------------------
 
-/// @prop - Color of backdrop
-$loading-backdrop-ios-color:                $backdrop-ios-color !default;
-
 /// @prop - Font family of the loading wrapper
 $loading-ios-font-family:                   $font-family-ios-base !default;
 
diff --git a/packages/core/src/components/loading/loading.md.scss b/packages/core/src/components/loading/loading.md.scss
index 0dcf580812..b527b2892d 100644
--- a/packages/core/src/components/loading/loading.md.scss
+++ b/packages/core/src/components/loading/loading.md.scss
@@ -1,10 +1,6 @@
 @import "./loading";
 @import "./loading.md.vars";
 
-.loading-backdrop-ios {
-  background-color: $loading-backdrop-md-color;
-}
-
 // Material Design Loading Indicator
 // --------------------------------------------------
 
diff --git a/packages/core/src/components/loading/loading.md.vars.scss b/packages/core/src/components/loading/loading.md.vars.scss
index c9dc44fbe9..1cf80d489a 100644
--- a/packages/core/src/components/loading/loading.md.vars.scss
+++ b/packages/core/src/components/loading/loading.md.vars.scss
@@ -3,9 +3,6 @@
 // Material Design Loading Indicator
 // --------------------------------------------------
 
-/// @prop - Color of backdrop
-$loading-backdrop-md-color:            $backdrop-md-color !default;
-
 /// @prop - Font family of the loading wrapper
 $loading-md-font-family:               $font-family-md-base !default;
 
diff --git a/packages/core/src/components/loading/loading.scss b/packages/core/src/components/loading/loading.scss
index d780d9f21a..faa91a7063 100644
--- a/packages/core/src/components/loading/loading.scss
+++ b/packages/core/src/components/loading/loading.scss
@@ -14,37 +14,15 @@ ion-loading {
   align-items: center;
   justify-content: center;
 
+  touch-action: none;
+
   contain: strict;
 }
 
-ion-loading ion-gesture {
-  display: block;
-
-  width: 100%;
-  height: 100%;
-
-  visibility: inherit;
-}
-
 ion-loading-controller {
   display: none;
 }
 
-.loading-backdrop {
-  @include position(0, null, null, 0);
-
-  position: absolute;
-
-  z-index: $z-index-backdrop;
-  display: block;
-
-  width: 100%;
-  height: 100%;
-
-  opacity: .01;
-  transform: translateZ(0);
-}
-
 .loading-wrapper {
   z-index: $z-index-overlay-wrapper;
   display: flex;
diff --git a/packages/core/src/components/loading/loading.tsx b/packages/core/src/components/loading/loading.tsx
index 4277997c91..5fdcfd14cd 100644
--- a/packages/core/src/components/loading/loading.tsx
+++ b/packages/core/src/components/loading/loading.tsx
@@ -151,6 +151,11 @@ export class Loading {
     this.dismiss();
   }
 
+  @Listen('ionBackdropTap')
+  protected onBackdropTap() {
+    this.dismiss();
+  }
+
   /**
    * Present the loading overlay after it has been created.
    */
@@ -223,12 +228,6 @@ export class Loading {
     });
   }
 
-  protected backdropClick() {
-    if (this.enableBackdropDismiss) {
-      this.dismiss();
-    }
-  }
-
   hostData() {
     const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'loading-translucent') : {};
 
@@ -241,8 +240,6 @@ export class Loading {
   }
 
   render() {
-    const themedClasses = createThemedClasses(this.mode, this.color, 'loading-backdrop');
-
     if (this.cssClass) {
       this.cssClass.split(' ').forEach(cssClass => {
         if (cssClass.trim() !== '') this.el.classList.add(cssClass);
@@ -268,12 +265,7 @@ export class Loading {
     }
 
     return [
-      <ion-backdrop
-        onClick={this.backdropClick.bind(this)}
-        class={{
-          ...themedClasses,
-          'hide-backdrop': !this.showBackdrop
-        }}></ion-backdrop>,
+      <ion-backdrop visible={this.showBackdrop} tappable={false} />,
       <div class='loading-wrapper' role='dialog'>
         {loadingInner}
       </div>
diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx
index c0d9e9603d..9fd137657c 100644
--- a/packages/core/src/components/menu/menu.tsx
+++ b/packages/core/src/components/menu/menu.tsx
@@ -447,7 +447,13 @@ export class Menu {
       <div class='menu-inner page-inner' ref={el => this.menuInnerEl = el}>
         <slot></slot>
       </div>,
-      <ion-backdrop class='menu-backdrop' ref={el => this.backdropEl = el}></ion-backdrop> ,
+
+      <ion-backdrop
+        ref={el => this.backdropEl = el}
+        class='menu-backdrop'
+        tappable={false}
+        stopPropagation={false}/>,
+
       <ion-gesture {...{
         'canStart': this.canStart.bind(this),
         'onWillStart': this.onWillStart.bind(this),
@@ -465,7 +471,7 @@ export class Menu {
         'attachTo': 'body',
         'disableScroll': true,
         'block': this.gestureBlocker
-      }}></ion-gesture>
+      }}/>
     ]);
   }
 }
diff --git a/packages/core/src/components/menu/test/basic/index.html b/packages/core/src/components/menu/test/basic/index.html
index 87a54c784c..9aa2a59f63 100644
--- a/packages/core/src/components/menu/test/basic/index.html
+++ b/packages/core/src/components/menu/test/basic/index.html
@@ -6,6 +6,15 @@
   <title>Menu - Basic</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
   <script src="/dist/ionic.js"></script>
+
+  <style>
+    .f {
+      width: 200px;
+      height: 200px;
+      background: blue;
+      margin: 20px auto;
+    }
+  </style>
 </head>
 
 <body>
@@ -75,6 +84,14 @@
 
           <ion-button onclick="setEnabled()">Set Swipe Enabled False</ion-button>
         </p>
+
+        <div class="f"></div>
+        <div class="f"></div>
+        <div class="f"></div>
+        <div class="f"></div>
+        <div class="f"></div>
+        <div class="f"></div>
+
       </ion-content>
 
     </ion-page>
diff --git a/packages/core/src/components/modal/animations/ios.enter.ts b/packages/core/src/components/modal/animations/ios.enter.ts
index 97699d932d..a7334e03bb 100644
--- a/packages/core/src/components/modal/animations/ios.enter.ts
+++ b/packages/core/src/components/modal/animations/ios.enter.ts
@@ -8,7 +8,7 @@ export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElem
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.modal-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
 
   const wrapperAnimation = new Animation();
   wrapperAnimation.addElement(baseEl.querySelector('.modal-wrapper'));
diff --git a/packages/core/src/components/modal/animations/ios.leave.ts b/packages/core/src/components/modal/animations/ios.leave.ts
index 3446d18dc9..054363ef5f 100644
--- a/packages/core/src/components/modal/animations/ios.leave.ts
+++ b/packages/core/src/components/modal/animations/ios.leave.ts
@@ -8,7 +8,7 @@ export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElem
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.modal-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
 
   const wrapperAnimation = new Animation();
   const wrapperEl = baseEl.querySelector('.modal-wrapper');
diff --git a/packages/core/src/components/modal/animations/md.enter.ts b/packages/core/src/components/modal/animations/md.enter.ts
index e586c0f3ff..336e607011 100644
--- a/packages/core/src/components/modal/animations/md.enter.ts
+++ b/packages/core/src/components/modal/animations/md.enter.ts
@@ -7,7 +7,7 @@ export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLEleme
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.modal-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
 
   const wrapperAnimation = new Animation();
   wrapperAnimation.addElement(baseEl.querySelector('.modal-wrapper'));
diff --git a/packages/core/src/components/modal/animations/md.leave.ts b/packages/core/src/components/modal/animations/md.leave.ts
index 78ba15bb60..9c332c5f60 100644
--- a/packages/core/src/components/modal/animations/md.leave.ts
+++ b/packages/core/src/components/modal/animations/md.leave.ts
@@ -7,7 +7,7 @@ export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLEleme
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.modal-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
 
   const wrapperAnimation = new Animation();
   const wrapperEl = baseEl.querySelector('.modal-wrapper');
diff --git a/packages/core/src/components/modal/modal.ios.scss b/packages/core/src/components/modal/modal.ios.scss
index fc61b3901e..3222fec1c1 100644
--- a/packages/core/src/components/modal/modal.ios.scss
+++ b/packages/core/src/components/modal/modal.ios.scss
@@ -1,10 +1,6 @@
 @import "./modal";
 @import "./modal.ios.vars";
 
-.modal-backdrop-ios {
-  background-color: $modal-backdrop-ios-color;
-}
-
 // iOS Modals
 // --------------------------------------------------
 
diff --git a/packages/core/src/components/modal/modal.ios.vars.scss b/packages/core/src/components/modal/modal.ios.vars.scss
index 80566f10f1..b6dcd56489 100644
--- a/packages/core/src/components/modal/modal.ios.vars.scss
+++ b/packages/core/src/components/modal/modal.ios.vars.scss
@@ -3,9 +3,6 @@
 // iOS Modals
 // --------------------------------------------------
 
-/// @prop - Color of backdrop
-$modal-backdrop-ios-color:            $backdrop-ios-color !default;
-
 /// @prop - Background color for the modal
 $modal-ios-background-color:          $background-ios-color !default;
 
diff --git a/packages/core/src/components/modal/modal.md.scss b/packages/core/src/components/modal/modal.md.scss
index 0230c203d2..3976c11615 100644
--- a/packages/core/src/components/modal/modal.md.scss
+++ b/packages/core/src/components/modal/modal.md.scss
@@ -1,9 +1,6 @@
 @import "./modal";
 @import "./modal.md.vars";
 
-.modal-backdrop-md {
-  background-color: $modal-backdrop-md-color;
-}
 
 // Material Design Modals
 // --------------------------------------------------
diff --git a/packages/core/src/components/modal/modal.md.vars.scss b/packages/core/src/components/modal/modal.md.vars.scss
index c5152dfd9e..4791342a96 100644
--- a/packages/core/src/components/modal/modal.md.vars.scss
+++ b/packages/core/src/components/modal/modal.md.vars.scss
@@ -3,9 +3,6 @@
 // Material Design Modals
 // --------------------------------------------------
 
-/// @prop - Color of backdrop
-$modal-backdrop-md-color:         $backdrop-md-color !default;
-
 /// @prop - Background color for the modal
 $modal-md-background-color:       $background-md-color !default;
 
diff --git a/packages/core/src/components/modal/modal.scss b/packages/core/src/components/modal/modal.scss
index 657099a15c..345f58cb5f 100644
--- a/packages/core/src/components/modal/modal.scss
+++ b/packages/core/src/components/modal/modal.scss
@@ -20,33 +20,13 @@ ion-modal-controller {
   display: none;
 }
 
-.modal-backdrop {
-  @include position(0, null, null, 0);
 
-  position: absolute;
-
-  z-index: $z-index-backdrop;
-  display: block;
-
-  width: 100%;
-  height: 100%;
-
-  opacity: .01;
-  transform: translateZ(0);
-
-  @media not all and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
-    visibility: hidden;
+@media not all and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
+  ion-modal ion-backdrop {
+    display: none;
   }
 }
 
-.modal-backdrop.backdrop-no-tappable {
-  cursor: auto;
-}
-
-.modal-backdrop.hide-backdrop {
-  visibility: hidden;
-}
-
 .modal-wrapper {
   z-index: 10;
 
diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx
index 9d03d3a177..5b0abe425b 100644
--- a/packages/core/src/components/modal/modal.tsx
+++ b/packages/core/src/components/modal/modal.tsx
@@ -120,6 +120,30 @@ export class Modal {
    */
   @Event() ionModalDidUnload: EventEmitter<ModalEventDetail>;
 
+  componentDidLoad() {
+    this.ionModalDidLoad.emit();
+  }
+
+  componentDidUnload() {
+    this.ionModalDidUnload.emit();
+  }
+
+  @Listen('ionDismiss')
+  protected onDismiss(ev: UIEvent) {
+    ev.stopPropagation();
+    ev.preventDefault();
+
+    this.dismiss();
+  }
+
+  @Listen('ionBackdropTap')
+  protected onBackdropTap() {
+    // const opts: NavOptions = {
+    //   minClickBlockDuration: 400
+    // };
+    this.dismiss();
+  }
+
   /**
    * Present the modal overlay after it has been created.
    */
@@ -212,42 +236,11 @@ export class Modal {
     return this.el.querySelector(`.${USER_COMPONENT_MODAL_CONTAINER_CLASS}`);
   }
 
-  @Listen('ionDismiss')
-  protected onDismiss(ev: UIEvent) {
-    ev.stopPropagation();
-    ev.preventDefault();
-
-    this.dismiss();
-  }
-
-  componentDidLoad() {
-    this.ionModalDidLoad.emit();
-  }
-
-  componentDidUnload() {
-    this.ionModalDidUnload.emit();
-  }
-
-  protected backdropClick() {
-    if (this.enableBackdropDismiss) {
-      // const opts: NavOptions = {
-      //   minClickBlockDuration: 400
-      // };
-      this.dismiss();
-    }
-  }
-
   render() {
-    const backdropClasses = createThemedClasses(this.mode, this.color, 'modal-backdrop');
     const dialogClasses = createThemedClasses(this.mode, this.color, 'modal-wrapper');
 
     return [
-      <ion-backdrop
-        onClick={this.backdropClick.bind(this)}
-        class={{
-          ...backdropClasses,
-          'hide-backdrop': !this.showBackdrop
-        }}></ion-backdrop>,
+      <ion-backdrop visible={this.showBackdrop} tappable={this.enableBackdropDismiss}/>,
       <div role='dialog' class={dialogClasses}></div>
     ];
   }
diff --git a/packages/core/src/components/nav/nav.tsx b/packages/core/src/components/nav/nav.tsx
index 77ab2029a2..d705f87971 100644
--- a/packages/core/src/components/nav/nav.tsx
+++ b/packages/core/src/components/nav/nav.tsx
@@ -343,8 +343,7 @@ export class Nav implements PublicNav, NavOutlet {
         type='pan'
         direction='x'
         threshold={10}
-        attachTo='body'
-      ></ion-gesture>);
+        attachTo='body'/>);
     }
     if (this.mode === 'ios') {
       dom.push(<div class='nav-decor'/>);
diff --git a/packages/core/src/components/picker/animations/ios.enter.ts b/packages/core/src/components/picker/animations/ios.enter.ts
index afe4a2059d..2d22f3ca73 100644
--- a/packages/core/src/components/picker/animations/ios.enter.ts
+++ b/packages/core/src/components/picker/animations/ios.enter.ts
@@ -8,7 +8,7 @@ export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElem
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.picker-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
 
   const wrapperAnimation = new Animation();
   wrapperAnimation.addElement(baseEl.querySelector('.picker-wrapper'));
diff --git a/packages/core/src/components/picker/animations/ios.leave.ts b/packages/core/src/components/picker/animations/ios.leave.ts
index 88adc103ba..4861fa9890 100644
--- a/packages/core/src/components/picker/animations/ios.leave.ts
+++ b/packages/core/src/components/picker/animations/ios.leave.ts
@@ -8,7 +8,7 @@ export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElem
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.picker-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
 
   const wrapperAnimation = new Animation();
   wrapperAnimation.addElement(baseEl.querySelector('.picker-wrapper'));
diff --git a/packages/core/src/components/picker/picker.tsx b/packages/core/src/components/picker/picker.tsx
index 0a84c30471..fcf711c4fb 100644
--- a/packages/core/src/components/picker/picker.tsx
+++ b/packages/core/src/components/picker/picker.tsx
@@ -218,6 +218,16 @@ export class Picker {
     this.dismiss();
   }
 
+  @Listen('ionBackdropTap')
+  protected onBackdropTap() {
+    const cancelBtn = this.buttons.find(b => b.role === 'cancel');
+    if (cancelBtn) {
+      this.buttonClick(cancelBtn);
+    } else {
+      this.dismiss();
+    }
+  }
+
   buttonClick(button: PickerButton) {
     // if (this.disabled) {
     //   return;
@@ -273,18 +283,6 @@ export class Picker {
     return this.columns;
   }
 
-  protected backdropClick() {
-    // TODO !this.disabled
-    if (this.enableBackdropDismiss) {
-      const cancelBtn = this.buttons.find(b => b.role === 'cancel');
-      if (cancelBtn) {
-        this.buttonClick(cancelBtn);
-      } else {
-        this.dismiss();
-      }
-    }
-  }
-
   render() {
     // TODO: cssClass
 
@@ -332,12 +330,7 @@ export class Picker {
     // });
 
     return [
-      <ion-backdrop
-        onClick={this.backdropClick.bind(this)}
-        class={{
-          'picker-backdrop': true,
-          'hide-backdrop': !this.showBackdrop
-        }}></ion-backdrop>,
+      <ion-backdrop visible={this.showBackdrop} tappable={this.enableBackdropDismiss}/>,
       <div class='picker-wrapper' role='dialog'>
         <div class='picker-toolbar'>
           {buttons.map(b =>
diff --git a/packages/core/src/components/popover/animations/ios.enter.ts b/packages/core/src/components/popover/animations/ios.enter.ts
index 53af5547bf..29e2c15d82 100644
--- a/packages/core/src/components/popover/animations/ios.enter.ts
+++ b/packages/core/src/components/popover/animations/ios.enter.ts
@@ -116,7 +116,7 @@ export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElem
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.popover-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
   backdropAnimation.fromTo('opacity', 0.01, 0.08);
 
   const wrapperAnimation = new Animation();
diff --git a/packages/core/src/components/popover/animations/ios.leave.ts b/packages/core/src/components/popover/animations/ios.leave.ts
index a150a0b9bf..5f2f7a0e8c 100644
--- a/packages/core/src/components/popover/animations/ios.leave.ts
+++ b/packages/core/src/components/popover/animations/ios.leave.ts
@@ -7,7 +7,7 @@ export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElem
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.popover-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
 
   const wrapperAnimation = new Animation();
   wrapperAnimation.addElement(baseEl.querySelector('.popover-wrapper'));
diff --git a/packages/core/src/components/popover/animations/md.enter.ts b/packages/core/src/components/popover/animations/md.enter.ts
index e16e3eb938..3fac2edc53 100644
--- a/packages/core/src/components/popover/animations/md.enter.ts
+++ b/packages/core/src/components/popover/animations/md.enter.ts
@@ -70,7 +70,7 @@ export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLEleme
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.popover-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
   backdropAnimation.fromTo('opacity', 0.01, 0.08);
 
   const wrapperAnimation = new Animation();
diff --git a/packages/core/src/components/popover/animations/md.leave.ts b/packages/core/src/components/popover/animations/md.leave.ts
index 36dd03eed8..a70f4456ee 100644
--- a/packages/core/src/components/popover/animations/md.leave.ts
+++ b/packages/core/src/components/popover/animations/md.leave.ts
@@ -7,7 +7,7 @@ export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLEleme
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-  backdropAnimation.addElement(baseEl.querySelector('.popover-backdrop'));
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
 
   const wrapperAnimation = new Animation();
   wrapperAnimation.addElement(baseEl.querySelector('.popover-wrapper'));
diff --git a/packages/core/src/components/popover/popover.ios.scss b/packages/core/src/components/popover/popover.ios.scss
index 3acf0b6f1a..2f660ec2b0 100644
--- a/packages/core/src/components/popover/popover.ios.scss
+++ b/packages/core/src/components/popover/popover.ios.scss
@@ -1,10 +1,6 @@
 @import "./popover";
 @import "./popover.ios.vars";
 
-.popover-backdrop-ios {
-  background-color: $popover-backdrop-ios-color;
-}
-
 // iOS Popover
 // --------------------------------------------------
 
diff --git a/packages/core/src/components/popover/popover.md.scss b/packages/core/src/components/popover/popover.md.scss
index e2681579d0..5c3623d15d 100644
--- a/packages/core/src/components/popover/popover.md.scss
+++ b/packages/core/src/components/popover/popover.md.scss
@@ -1,10 +1,6 @@
 @import "./popover";
 @import "./popover.md.vars";
 
-.popover-backdrop-md {
-  background-color: $popover-backdrop-md-color;
-}
-
 // Material Design Popover
 // --------------------------------------------------
 
diff --git a/packages/core/src/components/popover/popover.md.vars.scss b/packages/core/src/components/popover/popover.md.vars.scss
index 5258b881e5..44318754c6 100644
--- a/packages/core/src/components/popover/popover.md.vars.scss
+++ b/packages/core/src/components/popover/popover.md.vars.scss
@@ -1,8 +1,5 @@
 @import "../../themes/ionic.globals.md";
 
-/// @prop - Color of backdrop
-$popover-backdrop-md-color:             $backdrop-md-color !default;
-
 // Material Design Popover
 // --------------------------------------------------
 
diff --git a/packages/core/src/components/popover/popover.scss b/packages/core/src/components/popover/popover.scss
index 971ab70605..b0da4ced3e 100644
--- a/packages/core/src/components/popover/popover.scss
+++ b/packages/core/src/components/popover/popover.scss
@@ -45,26 +45,3 @@ ion-popover {
 ion-popover-controller {
   display: none;
 }
-
-
-// Popover Backdrop
-// --------------------------------------------------
-
-.popover-backdrop {
-  @include position(0, null, null, 0);
-
-  position: absolute;
-
-  z-index: $z-index-backdrop;
-  display: block;
-
-  width: 100%;
-  height: 100%;
-
-  opacity: .01;
-  transform: translateZ(0);
-}
-
-.popover-backdrop.backdrop-no-tappable {
-  cursor: auto;
-}
diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx
index 0f6cfa529e..1ac6a02616 100644
--- a/packages/core/src/components/popover/popover.tsx
+++ b/packages/core/src/components/popover/popover.tsx
@@ -128,6 +128,34 @@ export class Popover {
    */
   @Event() ionPopoverDidUnload: EventEmitter<PopoverEventDetail>;
 
+  componentDidLoad() {
+    this.ionPopoverDidLoad.emit();
+  }
+
+  componentDidEnter() {
+    this.ionPopoverDidPresent.emit();
+  }
+
+  componentDidUnload() {
+    this.ionPopoverDidUnload.emit();
+  }
+
+  @Listen('ionDismiss')
+  protected onDismiss(ev: UIEvent) {
+    ev.stopPropagation();
+    ev.preventDefault();
+
+    this.dismiss();
+  }
+
+  @Listen('ionBackdropTap')
+  protected onBackdropTap() {
+    // const opts: NavOptions = {
+    //   minClickBlockDuration: 400
+    // };
+    this.dismiss();
+  }
+
   /**
    * Present the popover overlay after it has been created.
    */
@@ -211,57 +239,21 @@ export class Popover {
       });
   }
 
-  componentDidLoad() {
-    this.ionPopoverDidLoad.emit();
-  }
-
-  componentDidEnter() {
-    this.ionPopoverDidPresent.emit();
-  }
-
-  componentDidUnload() {
-    this.ionPopoverDidUnload.emit();
-  }
-
-  @Listen('ionDismiss')
-  protected onDismiss(ev: UIEvent) {
-    ev.stopPropagation();
-    ev.preventDefault();
-
-    this.dismiss();
-  }
-
-  protected backdropClick() {
-    if (this.enableBackdropDismiss) {
-      // const opts: NavOptions = {
-      //   minClickBlockDuration: 400
-      // };
-      this.dismiss();
-    }
-  }
-
   hostData() {
     const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'popover-translucent') : {};
 
-    const hostClasses = {
-      ...themedClasses
-    };
-
     return {
-      class: hostClasses
+      class: {
+        ...themedClasses
+      }
     };
   }
 
   render() {
-    const backdropClasses = createThemedClasses(this.mode, this.color, 'popover-backdrop'),
-      wrapperClasses = createThemedClasses(this.mode, this.color, 'popover-wrapper');
+    const wrapperClasses = createThemedClasses(this.mode, this.color, 'popover-wrapper');
 
     return [
-      <ion-backdrop
-        onClick={this.backdropClick.bind(this)}
-        class={{
-          ...backdropClasses
-        }}></ion-backdrop>,
+      <ion-backdrop tappable={this.enableBackdropDismiss}/>,
       <div class={wrapperClasses}>
         <div class='popover-arrow' />
         <div class='popover-content'>