diff --git a/chrome/browser/resources/settings/controls/dialog_drawer.html b/chrome/browser/resources/settings/controls/dialog_drawer.html
index 0843b20..59ae875 100644
--- a/chrome/browser/resources/settings/controls/dialog_drawer.html
+++ b/chrome/browser/resources/settings/controls/dialog_drawer.html
@@ -7,7 +7,6 @@
         background-color: #FFF;
         border: none;
         bottom: 0;
-        height: 100%;
         left: -265px;
         margin: 0;
         overflow: hidden;
@@ -18,6 +17,10 @@
         width: 256px;
       }

+      :host, #container {
+        height: 100%;
+      }
+
       :host(.opening) {
         left: 0;
       }
@@ -47,7 +50,9 @@
         opacity: 1;
       }
     </style>
-    <content></content>
+    <div id="container" on-tap="onContainerTap_">
+      <content></content>
+    <div>
   </template>
 </dom-module>
 <script src="dialog_drawer.js"></script>
diff --git a/chrome/browser/resources/settings/controls/dialog_drawer.js b/chrome/browser/resources/settings/controls/dialog_drawer.js
index 4b422bd..4fd7fd1 100644
--- a/chrome/browser/resources/settings/controls/dialog_drawer.js
+++ b/chrome/browser/resources/settings/controls/dialog_drawer.js
@@ -51,20 +51,16 @@ Polymer({
     }
   },

-  /**
-   * Listens for a tap event outside the dialog in order to close it.
-   * @param {Event} event
-   * @private
-   */
-  onDialogTap_: function(event) {
-    if (event.target != this)  // Only care about self.
-      return;
-
-    var rect = this.getBoundingClientRect();
+  /** @private */
+  onContainerTap_: function(e) {
+    // Stop propagation on any event inside the container, such that events
+    // |onDialogTap_| is only triggered when clicking outside of the dialog.
+    e.stopPropagation();
+  },

-    // We can ignore checking top/bottom because dialog is height 100%.
-    if (event.detail.x < rect.left || event.detail.x > rect.right)
-      this.closeDrawer();
+  /** @private */
+  onDialogTap_: function() {
+    this.closeDrawer();
   },

   /**