fix(backdrop): device support

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;
     }
   }
 }

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;
 }

packages/core/src/components/action-sheet/action-sheet.tsx

@@ -195,10 +195,9 @@ export class ActionSheet {
     this.dismiss();
   }
 
-  protected backdropClick() {
+  @Listen('ionBackdropTap')
-    if (this.enableBackdropDismiss) {
+  protected onBackdropTap() {
-      this.dismiss();
+    this.dismiss();
-    }
   }
 
   protected buttonClick(button: ActionSheetButton) {
@@ -238,9 +237,7 @@ export class ActionSheet {
     const buttons = allButtons.filter(b => b.role !== 'cancel');
 
     return [
-      <ion-backdrop
+      <ion-backdrop tappable={this.enableBackdropDismiss}/>,
-        onClick={this.backdropClick.bind(this)}
-        class='action-sheet-backdrop'></ion-backdrop>,
       <div class='action-sheet-wrapper' role='dialog'>
         <div class='action-sheet-container'>
           <div class='action-sheet-group'>

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'));

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'));

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'));

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'));

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;

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() {
+  @Listen('ionBackdropTap')
-    if (this.enableBackdropDismiss) {
+  protected onBackdropTap() {
-      this.dismiss(null, BACKDROP);
+    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
+      <ion-backdrop tappable={this.enableBackdropDismiss}/>,
-        onClick={this.backdropClick.bind(this)}
-        class='alert-backdrop'></ion-backdrop>,
       <div class='alert-wrapper'>
         <div class='alert-head'>
           {this.title

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'));

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'));

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'));

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'));

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 {
+  contain: strict;
-  cursor: auto;
+
+  &.backdrop-hide {
+    background: transparent;
+  }
+
+  &.backdrop-no-tappable {
+    cursor: auto;
+  }
 }

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,
+      }
+    };
+  }
 }

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.
+boolean
-Possible values are: `"ios"` or `"md"`.
+
+
+#### visible
+
+boolean
 
 
 ## Attributes
 
-#### mode
+#### stop-propagation
+
+boolean
 
 
+#### tappable
 
-The mode determines which platform styles to use.
+boolean
-Possible values are: `"ios"` or `"md"`.
+
+
+#### visible
+
+boolean
+
+
+## Events
+
+#### ionBackdropTap
 
 
 

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'));

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'));

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'));

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'));

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
 // --------------------------------------------------
 

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;
 

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
 // --------------------------------------------------
 

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;
 

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;

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
+      <ion-backdrop visible={this.showBackdrop} tappable={false} />,
-        onClick={this.backdropClick.bind(this)}
-        class={{
-          ...themedClasses,
-          'hide-backdrop': !this.showBackdrop
-        }}></ion-backdrop>,
       <div class='loading-wrapper' role='dialog'>
         {loadingInner}
       </div>

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>
+      }}/>
     ]);
   }
 }

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>

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'));

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');

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'));

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');

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
 // --------------------------------------------------
 

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;
 

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
 // --------------------------------------------------

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;
 

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;
+@media not all and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
-
+  ion-modal ion-backdrop {
-  z-index: $z-index-backdrop;
+    display: none;
-  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;
   }
 }
 
-.modal-backdrop.backdrop-no-tappable {
-  cursor: auto;
-}
-
-.modal-backdrop.hide-backdrop {
-  visibility: hidden;
-}
-
 .modal-wrapper {
   z-index: 10;
 

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
+      <ion-backdrop visible={this.showBackdrop} tappable={this.enableBackdropDismiss}/>,
-        onClick={this.backdropClick.bind(this)}
-        class={{
-          ...backdropClasses,
-          'hide-backdrop': !this.showBackdrop
-        }}></ion-backdrop>,
       <div role='dialog' class={dialogClasses}></div>
     ];
   }

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'
+        attachTo='body'/>);
-      ></ion-gesture>);
     }
     if (this.mode === 'ios') {
       dom.push(<div class='nav-decor'/>);

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'));

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'));

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
+      <ion-backdrop visible={this.showBackdrop} tappable={this.enableBackdropDismiss}/>,
-        onClick={this.backdropClick.bind(this)}
-        class={{
-          'picker-backdrop': true,
-          'hide-backdrop': !this.showBackdrop
-        }}></ion-backdrop>,
       <div class='picker-wrapper' role='dialog'>
         <div class='picker-toolbar'>
           {buttons.map(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();

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'));

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();

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'));

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
 // --------------------------------------------------
 

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
 // --------------------------------------------------
 

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
 // --------------------------------------------------
 

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;
-}

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'),
+    const wrapperClasses = createThemedClasses(this.mode, this.color, 'popover-wrapper');
-      wrapperClasses = createThemedClasses(this.mode, this.color, 'popover-wrapper');
 
     return [
-      <ion-backdrop
+      <ion-backdrop tappable={this.enableBackdropDismiss}/>,
-        onClick={this.backdropClick.bind(this)}
-        class={{
-          ...backdropClasses
-        }}></ion-backdrop>,
       <div class={wrapperClasses}>
         <div class='popover-arrow' />
         <div class='popover-content'>