diff --git a/packages/docs/src/.vuepress/components/DropdownMobileDemo.vue b/packages/docs/src/.vuepress/components/DropdownMobileDemo.vue
index 49392616..2e9eb67e 100644
--- a/packages/docs/src/.vuepress/components/DropdownMobileDemo.vue
+++ b/packages/docs/src/.vuepress/components/DropdownMobileDemo.vue
@@ -51,7 +51,7 @@ export default {
 
           <div v-if="isMobile">
             <button
-              class="bg-gray-300 rounded px-4 py-2"
+              class="bg-gray-300 rounded px-4 py-2 w-full"
               @click="hide()"
             >
               Cancel
@@ -75,17 +75,20 @@ body.no-scroll {
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0 0 0 / 90%);
-  pointer-events: none;
   display: flex;
   align-items: flex-end;
-  padding: 12px;
+}
+
+.v-popper__popper--no-positioning .v-popper__backdrop {
+  display: block;
+  background: rgba(0 0 0 / 90%);
 }
 
 .v-popper__popper--no-positioning .v-popper__wrapper {
   width: 100%;
   pointer-events: auto;
   transition: transform .15s ease-out;
+  padding: 12px;
 }
 
 .v-popper__popper--no-positioning.v-popper__popper--hidden .v-popper__wrapper {
diff --git a/packages/floating-vue/src/components/PopperContent.vue b/packages/floating-vue/src/components/PopperContent.vue
index ea962b4d..35f85230 100644
--- a/packages/floating-vue/src/components/PopperContent.vue
+++ b/packages/floating-vue/src/components/PopperContent.vue
@@ -27,6 +27,10 @@
     :data-popper-placement="result ? result.placement : undefined"
     @keyup.esc="autoHide && $emit('hide')"
   >
+    <div
+      class="v-popper__backdrop"
+      @click="autoHide && $emit('hide')"
+    />
     <div
       class="v-popper__wrapper"
       :style="result ? {
@@ -113,6 +117,7 @@ export default {
   visibility: hidden;
   opacity: 0;
   transition: opacity .15s, visibility .15s;
+  pointer-events: none;
 }
 
 .v-popper__popper.v-popper__popper--shown {
@@ -126,6 +131,15 @@ export default {
   transition: none !important;
 }
 
+.v-popper__backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: none;
+}
+
 .v-popper__inner {
   position: relative;
   box-sizing: border-box;
@@ -250,5 +264,4 @@ export default {
 .v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-inner {
   left: -2px;
 }
-
 </style>