From 21a3fec3e9d75daf70d2f3e4b406e1e947d4a7e4 Mon Sep 17 00:00:00 2001
From: Dan Popescu <pdan.popescu@gmail.com>
Date: Thu, 4 Mar 2021 20:22:40 +0200
Subject: [PATCH] feat(position engine): improve positioning #8175, #8191,
 #8343, #8554

#8175, #8191, #8343, #8554
---
 ui/dev/src/index.template.html                |   2 +-
 ui/dev/src/pages/components/menu.vue          | 188 ++++++--
 ui/dev/src/pages/components/popup-proxy.vue   |   2 +-
 ui/dev/src/pages/form/date-part1-basic.vue    |   4 +-
 .../pages/other/app-fullscreen-portals.vue    |  88 ++++
 .../src/pages/web-tests/menu-positioning.vue  |  75 +++
 ui/src/components/menu/QMenu.js               |  80 ++--
 ui/src/components/menu/QMenu.json             |  14 +
 ui/src/components/menu/QMenu.sass             |  17 +-
 ui/src/components/menu/QMenu.styl             |  17 +-
 ui/src/components/select/QSelect.js           |   2 +-
 ui/src/components/select/QSelect.sass         |   4 +-
 ui/src/components/select/QSelect.styl         |   4 +-
 ui/src/components/tooltip/QTooltip.js         |  71 +--
 ui/src/components/tooltip/QTooltip.json       |  18 +-
 ui/src/components/tooltip/QTooltip.sass       |  26 +-
 ui/src/components/tooltip/QTooltip.styl       |  26 +-
 ui/src/css/core/helpers.sass                  |   8 +
 ui/src/css/core/helpers.styl                  |   8 +
 ui/src/css/core/positioning.sass              |   7 -
 ui/src/css/core/positioning.styl              |   7 -
 ui/src/mixins/anchor.js                       |  47 +-
 ui/src/mixins/virtual-scroll.js               |  38 +-
 ui/src/utils/event.js                         |  14 +
 ui/src/utils/position-engine.js               | 435 ++++++++++++------
 ui/src/utils/scroll.js                        |  35 ++
 ui/types/utils/event.d.ts                     |   1 +
 ui/types/utils/scroll.d.ts                    |   1 +
 28 files changed, 891 insertions(+), 348 deletions(-)
 create mode 100644 ui/dev/src/pages/web-tests/menu-positioning.vue

diff --git a/ui/dev/src/index.template.html b/ui/dev/src/index.template.html
index 2cc87503b04..f67f327f5b6 100644
--- a/ui/dev/src/index.template.html
+++ b/ui/dev/src/index.template.html
@@ -5,7 +5,7 @@
     <meta name="description" content="<%= productDescription %>">
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
+    <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=5, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
 
     <link rel="icon" href="https://cdn.quasar.dev/img/quasar-logo.png" type="image/x-icon">
   </head>
diff --git a/ui/dev/src/pages/components/menu.vue b/ui/dev/src/pages/components/menu.vue
index f9a336b992b..29e799a5fec 100644
--- a/ui/dev/src/pages/components/menu.vue
+++ b/ui/dev/src/pages/components/menu.vue
@@ -1,8 +1,22 @@
 <template>
   <div>
     <div class="q-layout-padding">
-      <div class="caption" style="margin-top: 120px;">
+      <div class="caption row items-center justify-between" style="margin-top: 134px;">
         This page has intended scroll so you can see multiple scenarios.
+
+        <q-select
+          v-model="transition"
+          :options="transitions"
+          map-options
+          emit-value
+          label="transition"
+          clearable
+          color="deep-orange"
+          outlined
+          dense
+          style="min-width: 14em"
+          behavior="menu"
+        />
       </div>
 
       <div class="q-gutter-sm">
@@ -25,7 +39,7 @@
                 v-close-popup
                 @click="showNotify()"
               >
-                <q-item-section>Label</q-item-section>
+                <q-item-section>Label {{ n }}/20</q-item-section>
               </q-item>
             </q-list>
           </q-menu>
@@ -50,7 +64,7 @@
                 v-close-popup
                 @click="showNotify()"
               >
-                <q-item-section>Label</q-item-section>
+                <q-item-section>Label {{ n }}/20</q-item-section>
               </q-item>
             </q-list>
           </q-menu>
@@ -70,14 +84,14 @@
                 v-close-popup
                 @click="showNotify()"
               >
-                <q-item-section>Label</q-item-section>
+                <q-item-section>Label {{ n }}/20</q-item-section>
               </q-item>
             </q-list>
           </q-menu>
         </q-btn>
 
         <q-btn color="primary" label="Cover">
-          <q-menu cover @show="log('@show cover')" @hide="log('@hide cover')">
+          <q-menu cover @show="log('@show cover')" @hide="log('@hide cover')" v-bind="transition">
             <q-list style="min-width: 100px">
               <q-item
                 v-for="n in 20"
@@ -86,14 +100,14 @@
                 v-close-popup
                 @click="showNotify()"
               >
-                <q-item-section>Label</q-item-section>
+                <q-item-section>Label {{ n }}/20</q-item-section>
               </q-item>
             </q-list>
           </q-menu>
         </q-btn>
 
         <q-btn color="primary" label="Menu with select">
-          <q-menu cover @show="log('@show cover')" @hide="log('@hide cover')" content-class="q-pa-md">
+          <q-menu cover @show="log('@show cover')" @hide="log('@hide cover')" content-class="q-pa-md" v-bind="transition">
             <div class="column q-gutter-md">
               <q-select v-model="selectModelS" :options="selectOptions" behavior="menu" filled label="Select single - menu" clearable />
               <q-select v-model="selectModelM" :options="selectOptions" behavior="menu" filled multiple label="Select multiple - menu" clearable />
@@ -140,7 +154,7 @@
                 <q-menu>
                   <q-list>
                     <q-item v-for="n in 5" :key="n" v-close-popup clickable>
-                      <q-item-section>Menu Item {{ n }}</q-item-section>
+                      <q-item-section>Menu Item {{ n }}/5</q-item-section>
                     </q-item>
                     <q-item clickable>
                       <q-item-section>Submenu Label</q-item-section>
@@ -150,7 +164,7 @@
                       <q-menu anchor="top right" self="top left">
                         <q-list>
                           <q-item v-for="n in 5" :key="n" v-close-popup clickable>
-                            <q-item-section>Menu Item {{ n }}</q-item-section>
+                            <q-item-section>Menu Item {{ n }}/5</q-item-section>
                           </q-item>
                           <q-item clickable v-close-popup="2">
                             <q-item-section>Close dialog</q-item-section>
@@ -166,7 +180,7 @@
         </q-dialog>
 
         <q-btn color="purple" label="Account Settings">
-          <q-menu>
+          <q-menu v-bind="transition">
             <div class="row no-wrap q-pa-md">
               <div class="column">
                 <div class="text-h6 q-mb-md">Settings</div>
@@ -194,6 +208,82 @@
             </div>
           </q-menu>
         </q-btn>
+
+        <q-btn color="brown" label="Max Height Menu">
+          <q-menu max-height="130px" v-bind="transition">
+            <q-list style="min-width: 100px">
+              <q-item clickable>
+                <q-item-section>New tab</q-item-section>
+              </q-item>
+              <q-item clickable>
+                <q-item-section>New incognito tab</q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item clickable>
+                <q-item-section>Recent tabs</q-item-section>
+              </q-item>
+              <q-item clickable>
+                <q-item-section>History</q-item-section>
+              </q-item>
+              <q-item clickable>
+                <q-item-section>Downloads</q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item clickable>
+                <q-item-section>Settings</q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item clickable>
+                <q-item-section>Help &amp; Feedback</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
+
+        <q-btn color="indigo" label="Max Width Menu">
+          <q-menu max-width="80px" v-bind="transition">
+            <q-list style="min-width: 100px">
+              <q-item clickable>
+                <q-item-section>
+                  <q-item-label lines="1">New tab</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-item clickable>
+                <q-item-section>
+                  <q-item-label lines="1">New incognito tab</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item clickable>
+                <q-item-section>
+                  <q-item-label lines="1">Recent tabs</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-item clickable>
+                <q-item-section>
+                  <q-item-label lines="1">History</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-item clickable>
+                <q-item-section>
+                  <q-item-label lines="1">Downloads</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item clickable>
+                <q-item-section>
+                  <q-item-label lines="1">Settings</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item clickable>
+                <q-item-section>
+                  <q-item-label lines="1">Help & Feedback</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
       </div>
 
       <div class="q-gutter-md q-my-md">
@@ -205,7 +295,9 @@
                 :cover="cover"
                 :anchor="anchor"
                 :self="self"
+                :offset="calculatedOffset"
                 auto-close
+                v-bind="transition"
               >
                 <q-list style="min-width: 400px">
                   <q-item
@@ -214,7 +306,7 @@
                     clickable
                     @click="showNotify()"
                   >
-                    <q-item-section>Label</q-item-section>
+                    <q-item-section>Label {{ n }}/50</q-item-section>
                   </q-item>
                 </q-list>
               </q-menu>
@@ -225,6 +317,8 @@
                 :cover="cover"
                 :anchor="anchor"
                 :self="self"
+                :offset="calculatedOffset"
+                v-bind="transition"
               >
                 <q-list>
                   <q-item
@@ -234,7 +328,7 @@
                     clickable
                     @click="showNotify()"
                   >
-                    <q-item-section>Label</q-item-section>
+                    <q-item-section>Label {{ n }}/5</q-item-section>
                   </q-item>
                 </q-list>
               </q-menu>
@@ -266,6 +360,7 @@
           <div class="row flex-center q-my-sm q-gutter-md">
             <q-toggle v-model="fit" label="Fit" />
             <q-toggle v-model="cover" label="Cover" />
+            <q-toggle v-model="offset" label="Offset [50, 50]" />
           </div>
           <q-card-section class="row" :class="cover ? 'justify-center' : ''">
             <div class="column items-center col-6">
@@ -317,12 +412,18 @@
         <q-card class="q-mx-auto" style="width: 500px; max-width: 90vw;">
           <q-card-section>
             <div class="q-gutter-sm">
-              <q-toggle label="touch-position" v-model="touchPosition" />
+              <q-toggle label="touch-position" v-model="touchPosition" toggle-indeterminate :indeterminate-value="null" />
               <q-toggle label="context-menu" v-model="contextMenu" />
             </div>
           </q-card-section>
           <q-img src="https://cdn.quasar.dev/img/material.png" style="height: 100px">
-            <q-menu :touch-position="touchPosition" :context-menu="contextMenu">
+            <q-menu
+              :touch-position="touchPosition"
+              :context-menu="contextMenu"
+              :offset="calculatedOffset"
+              :fit="fit"
+              :cover="cover"
+            >
               <q-list>
                 <q-item
                   v-for="n in 5"
@@ -331,14 +432,21 @@
                   clickable
                   @click="showNotify()"
                 >
-                  <q-item-section>Label</q-item-section>
+                  <q-item-section>Label {{ n }}/5</q-item-section>
                 </q-item>
               </q-list>
             </q-menu>
           </q-img>
           <div>With model: {{ menuModelTouch }}</div>
           <q-img src="https://cdn.quasar.dev/img/material.png" style="height: 100px">
-            <q-menu v-model="menuModelTouch" :touch-position="touchPosition" :context-menu="contextMenu">
+            <q-menu
+              v-model="menuModelTouch"
+              :touch-position="touchPosition"
+              :context-menu="contextMenu"
+              :offset="calculatedOffset"
+              :fit="fit"
+              :cover="cover"
+            >
               <q-list>
                 <q-item
                   v-for="n in 5"
@@ -347,7 +455,7 @@
                   clickable
                   @click="showNotify()"
                 >
-                  <q-item-section>Label</q-item-section>
+                  <q-item-section>Label {{ n }}/5</q-item-section>
                 </q-item>
               </q-list>
             </q-menu>
@@ -371,7 +479,7 @@
                   clickable
                   @click="showNotify()"
                 >
-                  <q-item-section>Label</q-item-section>
+                  <q-item-section>Label {{ n }}/5</q-item-section>
                 </q-item>
               </q-list>
             </q-menu>
@@ -389,7 +497,7 @@
                   clickable
                   @click="showNotify()"
                 >
-                  <q-item-section>Label</q-item-section>
+                  <q-item-section>Label {{ n }}/5</q-item-section>
                 </q-item>
               </q-list>
             </q-menu>
@@ -432,7 +540,7 @@
                   clickable
                   @click="showNotify()"
                 >
-                  <q-item-section>Label</q-item-section>
+                  <q-item-section>Label {{ n }}/5</q-item-section>
                 </q-item>
               </q-list>
             </q-menu>
@@ -463,7 +571,7 @@
                     <q-icon name="keyboard_arrow_right" />
                   </q-item-section>
 
-                  <q-menu anchor="top right" self="top left">
+                  <q-menu anchor="top end" self="top start">
                     <q-list>
                       <q-item
                         v-close-popup
@@ -481,7 +589,7 @@
                         <q-item-section side>
                           <q-icon name="keyboard_arrow_right" />
                         </q-item-section>
-                        <q-menu auto-close anchor="top right" self="top left">
+                        <q-menu auto-close anchor="top end" self="top start">
                           <q-list>
                             <q-item
                               v-for="y in 3"
@@ -499,11 +607,11 @@
                         <q-item-section side>
                           <q-icon name="keyboard_arrow_right" />
                         </q-item-section>
-                        <q-menu anchor="top right" self="top left">
+                        <q-menu anchor="top end" self="top start">
                           <q-list>
                             <q-item
-                              v-for="y in 3"
-                              :key="y"
+                              v-for="x in 3"
+                              :key="x"
                               clickable
                               v-close-popup
                             >
@@ -521,7 +629,7 @@
         </q-card>
       </div>
 
-      <div style="width: 250vw; height: 400vh">
+      <div style="width: 110vw; height: 40vh">
         <div class="row q-pa-sm">
           <div class="col-4">Left col</div>
           <div class="col-4">
@@ -536,8 +644,8 @@
         </div>
       </div>
 
-      <q-btn color="secondary" class="fixed-top-right" icon="directions" style="top: 65px; right: 16px;">
-        <q-menu ref="popover3">
+      <q-btn color="secondary" class="fixed-top-right" icon="directions" style="margin: 65px 35px;">
+        <q-menu ref="popover3" v-bind="transition">
           <q-img
             src="https://cdn.quasar.dev/img/map.png"
             style="height: 150px; width: 200px;"
@@ -547,8 +655,8 @@
         </q-menu>
       </q-btn>
 
-      <q-btn color="accent" class="fixed-bottom-right" icon="plus_one" style="bottom: 10px; right: 16px;">
-        <q-menu ref="popover4">
+      <q-btn color="accent" class="fixed-bottom-right" icon="plus_one" style="margin: 35px;">
+        <q-menu ref="popover4" v-bind="transition">
           <div class="group" style="width: 220px; text-align: center;">
             <q-btn icon="thumb_up" flat color="primary" @click="showNotify(), $refs.popover4.hide()" />
             <q-btn icon="thumb_down" flat color="primary" @click="showNotify(), $refs.popover4.hide()" />
@@ -558,8 +666,8 @@
       </q-btn>
     </div>
 
-    <q-btn icon="menu" color="primary" class="fixed-bottom-left" style="bottom: 10px; left: 10px;">
-      <q-menu ref="popover5">
+    <q-btn icon="menu" color="primary" class="fixed-bottom-left" style="margin: 35px;">
+      <q-menu ref="popover5" v-bind="transition">
         <q-list style="min-width: 200px">
           <q-item
             v-for="n in 20"
@@ -567,7 +675,7 @@
             clickable
             @click.native="showNotify(), $refs.popover5.hide()"
           >
-            <q-item-section>Label</q-item-section>
+            <q-item-section>Label {{ n }}/20</q-item-section>
           </q-item>
         </q-list>
       </q-menu>
@@ -588,6 +696,7 @@ export default {
       gigi: '',
       fit: false,
       cover: false,
+      offset: false,
       toggle: true,
       anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
       selfOrigin: { vertical: 'top', horizontal: 'left' },
@@ -612,7 +721,15 @@ export default {
       dialog2: false,
 
       mobileData: true,
-      bluetooth: false
+      bluetooth: false,
+
+      transitions: [
+        { label: 'Flip', value: { transitionShow: 'flip-right', transitionHide: 'flip-left' } },
+        { label: 'Scale', value: { transitionShow: 'scale', transitionHide: 'scale' } },
+        { label: 'Jump', value: { transitionShow: 'jump-down', transitionHide: 'jump-up' } },
+        { label: 'Rotate', value: { transitionShow: 'rotate', transitionHide: 'rotate' } }
+      ],
+      transition: null
     }
   },
   computed: {
@@ -621,6 +738,9 @@ export default {
     },
     self () {
       return `${this.selfOrigin.vertical} ${this.selfOrigin.horizontal}`
+    },
+    calculatedOffset () {
+      return this.offset === true ? [50, 50] : void 0
     }
   },
   methods: {
diff --git a/ui/dev/src/pages/components/popup-proxy.vue b/ui/dev/src/pages/components/popup-proxy.vue
index 308418403e4..a4464d69552 100644
--- a/ui/dev/src/pages/components/popup-proxy.vue
+++ b/ui/dev/src/pages/components/popup-proxy.vue
@@ -154,7 +154,7 @@
         <q-input filled v-model="input" mask="date" :rules="['date']">
           <template v-slot:append>
             <q-icon name="event" class="cursor-pointer">
-              <q-menu :breakpoint="600" @before-show="onBeforeShow2" @show="onShow2" @before-hide="onBeforeHide2" @hide="onHide2">
+              <q-menu :breakpoint="600" cover @before-show="onBeforeShow2" @show="onShow2" @before-hide="onBeforeHide2" @hide="onHide2">
                 <q-date v-model="input" filled />
                 <q-btn label="Close" v-close-popup />
               </q-menu>
diff --git a/ui/dev/src/pages/form/date-part1-basic.vue b/ui/dev/src/pages/form/date-part1-basic.vue
index 1251c102ed9..147ed13ba64 100644
--- a/ui/dev/src/pages/form/date-part1-basic.vue
+++ b/ui/dev/src/pages/form/date-part1-basic.vue
@@ -247,7 +247,7 @@
       </div>
       <div class="q-gutter-md">
         <q-input :dark="dark" filled v-model="inputFull">
-          <template v-slot:append>
+          <template v-slot:prepend>
             <q-icon name="event" class="cursor-pointer" @click.prevent>
               <q-popup-proxy ref="qDateProxy1">
                 <q-date
@@ -260,6 +260,8 @@
                 />
               </q-popup-proxy>
             </q-icon>
+          </template>
+          <template v-slot:append>
             <q-icon name="access_time" class="cursor-pointer" @click.prevent>
               <q-popup-proxy ref="qDateProxy2">
                 <q-time
diff --git a/ui/dev/src/pages/other/app-fullscreen-portals.vue b/ui/dev/src/pages/other/app-fullscreen-portals.vue
index 7e6499ab92a..e256f008035 100644
--- a/ui/dev/src/pages/other/app-fullscreen-portals.vue
+++ b/ui/dev/src/pages/other/app-fullscreen-portals.vue
@@ -33,6 +33,17 @@
           </h4>
         </div>
 
+        <q-btn dense class="q-mx-md" icon="event" round color="primary">
+          <q-popup-proxy @before-show="updateProxy" transition-show="scale" transition-hide="scale">
+            <q-date v-model="proxyDate">
+              <div class="row items-center justify-end q-gutter-sm">
+                <q-btn label="Cancel" color="primary" flat v-close-popup />
+                <q-btn label="OK" color="primary" flat @click="save" v-close-popup />
+              </div>
+            </q-date>
+          </q-popup-proxy>
+        </q-btn>
+
         <q-btn-dropdown no-caps color="primary" class="q-mt-sm" label="Btn dropdown">
           <q-list dense>
             <q-item clickable v-close-popup class="text-caption text-weight-bold">
@@ -131,11 +142,33 @@
                 color="primary"
                 @click="fullscreenNone"
               />
+
+              <q-btn dense class="q-mx-md" icon="event" round color="primary">
+                <q-popup-proxy @before-show="updateProxy" transition-show="scale" transition-hide="scale">
+                  <q-date v-model="proxyDate">
+                    <div class="row items-center justify-end q-gutter-sm">
+                      <q-btn label="Cancel" color="primary" flat v-close-popup />
+                      <q-btn label="OK" color="primary" flat @click="save" v-close-popup />
+                    </div>
+                  </q-date>
+                </q-popup-proxy>
+              </q-btn>
             </q-card-section>
 
             <q-card-section ref="fullscreenInside1" class="bg-orange-2 q-pa-md">
               Fullscreen inside modal dialog
               <span class="text-italic">Hover here for tooltip <q-tooltip>Some tooltip</q-tooltip></span>
+
+              <q-btn dense class="q-mx-md" icon="event" round color="primary">
+                <q-popup-proxy @before-show="updateProxy" transition-show="scale" transition-hide="scale">
+                  <q-date v-model="proxyDate">
+                    <div class="row items-center justify-end q-gutter-sm">
+                      <q-btn label="Cancel" color="primary" flat v-close-popup />
+                      <q-btn label="OK" color="primary" flat @click="save" v-close-popup />
+                    </div>
+                  </q-date>
+                </q-popup-proxy>
+              </q-btn>
             </q-card-section>
           </q-card>
         </q-dialog>
@@ -170,6 +203,17 @@
                 color="primary"
                 @click="fullscreenNone"
               />
+
+              <q-btn dense class="q-mx-md" icon="event" round color="primary">
+                <q-popup-proxy @before-show="updateProxy" transition-show="scale" transition-hide="scale">
+                  <q-date v-model="proxyDate">
+                    <div class="row items-center justify-end q-gutter-sm">
+                      <q-btn label="Cancel" color="primary" flat v-close-popup />
+                      <q-btn label="OK" color="primary" flat @click="save" v-close-popup />
+                    </div>
+                  </q-date>
+                </q-popup-proxy>
+              </q-btn>
             </q-card-section>
 
             <q-card-section ref="fullscreenInside2" class="bg-blue-2 q-pa-md">
@@ -209,6 +253,17 @@
                       color="primary"
                       @click="fullscreenNone"
                     />
+
+                    <q-btn dense class="q-mx-md" icon="event" round color="primary">
+                      <q-popup-proxy @before-show="updateProxy" transition-show="scale" transition-hide="scale">
+                        <q-date v-model="proxyDate">
+                          <div class="row items-center justify-end q-gutter-sm">
+                            <q-btn label="Cancel" color="primary" flat v-close-popup />
+                            <q-btn label="OK" color="primary" flat @click="save" v-close-popup />
+                          </div>
+                        </q-date>
+                      </q-popup-proxy>
+                    </q-btn>
                   </q-card-section>
 
                   <q-card-section ref="fullscreenInside4" class="bg-red-2 q-pa-md">
@@ -261,11 +316,33 @@
             color="primary"
             @click="fullscreenNone"
           />
+
+          <q-btn dense class="q-mx-md" icon="event" round color="primary">
+            <q-popup-proxy @before-show="updateProxy" transition-show="scale" transition-hide="scale">
+              <q-date v-model="proxyDate">
+                <div class="row items-center justify-end q-gutter-sm">
+                  <q-btn label="Cancel" color="primary" flat v-close-popup />
+                  <q-btn label="OK" color="primary" flat @click="save" v-close-popup />
+                </div>
+              </q-date>
+            </q-popup-proxy>
+          </q-btn>
         </q-card-section>
 
         <q-card-section ref="fullscreenInside3" class="bg-green-2 q-pa-md">
           Fullscreen inside seamless dialog (outside fullscreen el)
           <span class="text-italic">Hover here for tooltip <q-tooltip>Some tooltip</q-tooltip></span>
+
+          <q-btn dense class="q-mx-md" icon="event" round color="primary">
+            <q-popup-proxy @before-show="updateProxy" transition-show="scale" transition-hide="scale">
+              <q-date v-model="proxyDate">
+                <div class="row items-center justify-end q-gutter-sm">
+                  <q-btn label="Cancel" color="primary" flat v-close-popup />
+                  <q-btn label="OK" color="primary" flat @click="save" v-close-popup />
+                </div>
+              </q-date>
+            </q-popup-proxy>
+          </q-btn>
         </q-card-section>
       </q-card>
     </q-dialog>
@@ -279,6 +356,9 @@ export default {
       model: null,
       options: ['Option 1', 'Option 2', 'Option 3'],
 
+      date: '2019/03/01',
+      proxyDate: '2019/03/01',
+
       dialog1: false,
       dialog2: false,
       dialog3: false,
@@ -350,6 +430,14 @@ export default {
           this.fullscreenNone()
         }
       })
+    },
+
+    updateProxy () {
+      this.proxyDate = this.date
+    },
+
+    save () {
+      this.date = this.proxyDate
     }
   }
 }
diff --git a/ui/dev/src/pages/web-tests/menu-positioning.vue b/ui/dev/src/pages/web-tests/menu-positioning.vue
new file mode 100644
index 00000000000..e2282b538d3
--- /dev/null
+++ b/ui/dev/src/pages/web-tests/menu-positioning.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <div class="q-ma-md">
+      Space above
+      <div style="height: 330px"></div>
+    </div>
+
+    <q-menu
+      v-if="target !== null"
+      :target="target"
+      ref="menu"
+      :auto-close="false"
+      anchor="bottom left"
+      self="top left"
+    >
+      <div class="q-ma-lg">Wide content wide content wide content wide content wide content wide content</div>
+      <div class="q-ma-lg">Wide content wide content wide content wide content wide content wide content</div>
+      <template v-if="showContent">
+        <div v-for="i in 10" :key="i" class="q-ma-lg">Wide content wide content wide content wide content wide content wide content</div>
+      </template>
+    </q-menu>
+
+    <div class="q-ma-md row q-gutter-md">
+      <q-btn
+        label="Notify"
+        color="primary"
+        @click="notify"
+      />
+
+      <q-btn
+        label="Reset"
+        color="primary"
+        @click="showContent = false"
+      />
+    </div>
+
+    <div
+      style="width: 70vw"
+      class="inline-block"
+    ></div>
+    <div
+      class="q-ma-md inline-block"
+      ref="target"
+    >
+      Running Quasar v{{ version }}
+    </div>
+
+    <div style="height: 100px"></div>
+    Space below
+  </div>
+</template>
+
+<script>
+export default {
+  data: function () {
+    return {
+      version: 1,
+      showContent: false,
+      target: null
+    }
+  },
+  methods: {
+    notify: function () {
+      this.target = this.$refs.target
+      this.$nextTick(() => {
+        this.$refs.menu.show()
+
+        setTimeout(() => {
+          this.showContent = true
+        }, 150)
+      })
+    }
+  }
+}
+</script>
diff --git a/ui/src/components/menu/QMenu.js b/ui/src/components/menu/QMenu.js
index 32a2e710254..2b4f600ce28 100644
--- a/ui/src/components/menu/QMenu.js
+++ b/ui/src/components/menu/QMenu.js
@@ -65,7 +65,19 @@ export default Vue.extend({
       default: void 0
     },
 
-    touchPosition: Boolean,
+    touchPosition: {
+      type: Boolean,
+      default: null
+    },
+
+    minHeight: {
+      type: String,
+      default: null
+    },
+    minWidth: {
+      type: String,
+      default: null
+    },
 
     maxHeight: {
       type: String,
@@ -157,7 +169,7 @@ export default Vue.extend({
 
       this.absoluteOffset = void 0
 
-      if (evt !== void 0 && (this.touchPosition || this.contextMenu)) {
+      if (evt !== void 0 && (this.touchPosition === true || (this.touchPosition !== false && this.contextMenu))) {
         const pos = position(evt)
 
         if (pos.left !== void 0) {
@@ -194,7 +206,6 @@ export default Vue.extend({
           this.__portal.$el.click()
         }
 
-        this.updatePosition()
         this.$emit('show', evt)
       }, 300)
     },
@@ -239,16 +250,12 @@ export default Vue.extend({
     },
 
     __unconfigureScrollTarget () {
-      if (this.__scrollTarget !== void 0) {
-        this.__changeScrollEvent(this.__scrollTarget)
-        this.__scrollTarget = void 0
-      }
+      this.__changeScrollEvent()
     },
 
     __configureScrollTarget () {
-      if (this.anchorEl !== void 0 || this.scrollTarget !== void 0) {
-        this.__scrollTarget = getScrollTarget(this.anchorEl, this.scrollTarget)
-        this.__changeScrollEvent(this.__scrollTarget, this.updatePosition)
+      if (this.showing && (this.anchorEl !== void 0 || this.scrollTarget !== void 0)) {
+        this.__changeScrollEvent(this.updatePosition, getScrollTarget(this.anchorEl, this.scrollTarget))
       }
     },
 
@@ -276,17 +283,26 @@ export default Vue.extend({
         return
       }
 
-      setPosition({
-        el,
-        offset: this.offset,
-        anchorEl: this.anchorEl,
-        anchorOrigin: this.anchorOrigin,
-        selfOrigin: this.selfOrigin,
-        absoluteOffset: this.absoluteOffset,
-        fit: this.fit,
-        cover: this.cover,
-        maxHeight: this.maxHeight,
-        maxWidth: this.maxWidth
+      this.settingPosition !== void 0 && cancelAnimationFrame(this.settingPosition)
+      this.settingPosition = requestAnimationFrame(() => {
+        const touchPosition = this.touchPosition === true || (this.touchPosition !== false && this.contextMenu)
+
+        setPosition({
+          el,
+          offset: this.offset,
+          anchorEl: this.anchorEl,
+          anchorOrigin: this.anchorOrigin,
+          selfOrigin: this.selfOrigin,
+          absoluteOffset: this.absoluteOffset,
+          fit: touchPosition !== true && this.fit === true,
+          cover: touchPosition !== true && this.cover === true,
+          minHeight: this.minHeight,
+          minWidth: this.minWidth,
+          maxHeight: this.maxHeight,
+          maxWidth: this.maxWidth,
+          rtl: this.$q.lang.rtl
+        })
+        this.settingPosition = void 0
       })
     },
 
@@ -299,7 +315,7 @@ export default Vue.extend({
           // always prevent touch event
           e.type === 'touchstart' ||
           // prevent click if it's on a dialog backdrop
-          targetClassList.contains('q-dialog__backdrop')
+          targetClassList.contains('q-dialog__backdrop') === true
         ) {
           stopAndPreventClick(e)
         }
@@ -312,18 +328,22 @@ export default Vue.extend({
         props: { name: this.transition }
       }, [
         this.showing === true ? h('div', {
-          ref: 'inner',
-          staticClass: 'q-menu q-position-engine scroll' + this.menuClass,
-          class: this.contentClass,
-          style: this.contentStyle,
-          attrs: this.attrs,
-          on: this.onEvents,
+          class: 'q-menu__container column no-pointer-events',
           directives: [{
             name: 'click-outside',
             value: this.__onClickOutside,
             arg: this.anchorEl
           }]
-        }, slot(this, 'default')) : null
+        }, [
+          h('div', {
+            ref: 'inner',
+            staticClass: 'q-menu scroll all-pointer-events' + this.menuClass,
+            class: this.contentClass,
+            style: this.contentStyle,
+            attrs: this.attrs,
+            on: this.onEvents
+          }, slot(this, 'default'))
+        ]) : null
       ])
     }
   },
@@ -333,6 +353,8 @@ export default Vue.extend({
   },
 
   beforeDestroy () {
+    this.settingPosition !== void 0 && cancelAnimationFrame(this.settingPosition)
+
     // When the menu is destroyed while open we can only emit the event on anchorEl
     if (this.showing === true && this.anchorEl !== void 0) {
       this.anchorEl.dispatchEvent(
diff --git a/ui/src/components/menu/QMenu.json b/ui/src/components/menu/QMenu.json
index 7a222f18c9b..bcea6e4bdd9 100644
--- a/ui/src/components/menu/QMenu.json
+++ b/ui/src/components/menu/QMenu.json
@@ -112,6 +112,20 @@
       "category": "behavior"
     },
 
+    "min-height": {
+      "extends": "size",
+      "desc": "The minimum height of the menu; Size in CSS units, including unit name",
+      "category": "style",
+      "addedIn": "v1.15.5"
+    },
+
+    "min-width": {
+      "extends": "size",
+      "desc": "The minimum width of the menu; Size in CSS units, including unit name",
+      "category": "style",
+      "addedIn": "v1.15.5"
+    },
+
     "max-height": {
       "extends": "size",
       "desc": "The maximum height of the menu; Size in CSS units, including unit name",
diff --git a/ui/src/components/menu/QMenu.sass b/ui/src/components/menu/QMenu.sass
index 86fa23c1537..55adb44bf53 100644
--- a/ui/src/components/menu/QMenu.sass
+++ b/ui/src/components/menu/QMenu.sass
@@ -1,16 +1,17 @@
 .q-menu
-  position: fixed !important
   display: inline-block
+  visibility: collapse
   max-width: $menu-max-width
-
+  max-height: 65vh
+  outline: 0
+  border-radius: $generic-border-radius
   box-shadow: $menu-box-shadow
   background: $menu-background
-  border-radius: $generic-border-radius
-  overflow-y: auto
-  overflow-x: hidden
-  outline: 0
-  max-height: 65vh
-  z-index: $z-menu
+
+  &__container
+    position: fixed
+    z-index: $z-menu
+    contain: layout
 
   &--square
     border-radius: 0
diff --git a/ui/src/components/menu/QMenu.styl b/ui/src/components/menu/QMenu.styl
index 86fa23c1537..55adb44bf53 100644
--- a/ui/src/components/menu/QMenu.styl
+++ b/ui/src/components/menu/QMenu.styl
@@ -1,16 +1,17 @@
 .q-menu
-  position: fixed !important
   display: inline-block
+  visibility: collapse
   max-width: $menu-max-width
-
+  max-height: 65vh
+  outline: 0
+  border-radius: $generic-border-radius
   box-shadow: $menu-box-shadow
   background: $menu-background
-  border-radius: $generic-border-radius
-  overflow-y: auto
-  overflow-x: hidden
-  outline: 0
-  max-height: 65vh
-  z-index: $z-menu
+
+  &__container
+    position: fixed
+    z-index: $z-menu
+    contain: layout
 
   &--square
     border-radius: 0
diff --git a/ui/src/components/select/QSelect.js b/ui/src/components/select/QSelect.js
index e1e070275ba..07fa1b9b711 100755
--- a/ui/src/components/select/QSelect.js
+++ b/ui/src/components/select/QSelect.js
@@ -850,7 +850,7 @@ export default Vue.extend({
         ? this.$refs.menuContent
         : (
           this.$refs.menu !== void 0 && this.$refs.menu.__portal !== void 0
-            ? this.$refs.menu.__portal.$el
+            ? (this.$refs.menu.__portal.$el.children || [])[0] // fallback [] for IE
             : void 0
         )
     },
diff --git a/ui/src/components/select/QSelect.sass b/ui/src/components/select/QSelect.sass
index e9adc0fb262..b6a509dc57f 100644
--- a/ui/src/components/select/QSelect.sass
+++ b/ui/src/components/select/QSelect.sass
@@ -41,7 +41,7 @@
 
 // addressbar always gets shown, so need to slim this down
 body.mobile:not(.native-mobile) .q-select__dialog
-  max-height: calc(100vh - 108px) !important
+  max-height: calc(100vh - 168px) !important
 
 body.platform-android
 
@@ -61,4 +61,4 @@ body.platform-ios
       max-height: 47vh !important
 
   &:not(.native-mobile) .q-dialog__inner--top .q-select__dialog--focused
-    max-height: 50vh !important
+    max-height: 48vh !important
diff --git a/ui/src/components/select/QSelect.styl b/ui/src/components/select/QSelect.styl
index e9adc0fb262..b6a509dc57f 100644
--- a/ui/src/components/select/QSelect.styl
+++ b/ui/src/components/select/QSelect.styl
@@ -41,7 +41,7 @@
 
 // addressbar always gets shown, so need to slim this down
 body.mobile:not(.native-mobile) .q-select__dialog
-  max-height: calc(100vh - 108px) !important
+  max-height: calc(100vh - 168px) !important
 
 body.platform-android
 
@@ -61,4 +61,4 @@ body.platform-ios
       max-height: 47vh !important
 
   &:not(.native-mobile) .q-dialog__inner--top .q-select__dialog--focused
-    max-height: 50vh !important
+    max-height: 48vh !important
diff --git a/ui/src/components/tooltip/QTooltip.js b/ui/src/components/tooltip/QTooltip.js
index 9db655b0e4c..89ba39ab4a5 100644
--- a/ui/src/components/tooltip/QTooltip.js
+++ b/ui/src/components/tooltip/QTooltip.js
@@ -20,6 +20,15 @@ export default Vue.extend({
   mixins: [ AnchorMixin, ModelToggleMixin, PortalMixin, TransitionMixin ],
 
   props: {
+    minHeight: {
+      type: String,
+      default: null
+    },
+    minWidth: {
+      type: String,
+      default: null
+    },
+
     maxHeight: {
       type: String,
       default: null
@@ -86,8 +95,6 @@ export default Vue.extend({
       this.__showPortal()
 
       this.__nextTick(() => {
-        this.observer = new MutationObserver(() => this.updatePosition())
-        this.observer.observe(this.__portal.$el, { attributes: false, childList: true, characterData: true, subtree: true })
         this.updatePosition()
         this.__configureScrollTarget()
       })
@@ -114,11 +121,6 @@ export default Vue.extend({
     },
 
     __anchorCleanup () {
-      if (this.observer !== void 0) {
-        this.observer.disconnect()
-        this.observer = void 0
-      }
-
       if (this.unwatch !== void 0) {
         this.unwatch()
         this.unwatch = void 0
@@ -140,14 +142,21 @@ export default Vue.extend({
         return
       }
 
-      setPosition({
-        el,
-        offset: this.offset,
-        anchorEl: this.anchorEl,
-        anchorOrigin: this.anchorOrigin,
-        selfOrigin: this.selfOrigin,
-        maxHeight: this.maxHeight,
-        maxWidth: this.maxWidth
+      this.settingPosition !== void 0 && cancelAnimationFrame(this.settingPosition)
+      this.settingPosition = requestAnimationFrame(() => {
+        setPosition({
+          el,
+          offset: this.offset,
+          anchorEl: this.anchorEl,
+          anchorOrigin: this.anchorOrigin,
+          selfOrigin: this.selfOrigin,
+          minHeight: this.minHeight,
+          minWidth: this.minWidth,
+          maxHeight: this.maxHeight,
+          maxWidth: this.maxWidth,
+          rtl: this.$q.lang.rtl
+        })
+        this.settingPosition = void 0
       })
     },
 
@@ -201,20 +210,16 @@ export default Vue.extend({
     },
 
     __unconfigureScrollTarget () {
-      if (this.__scrollTarget !== void 0) {
-        this.__changeScrollEvent(this.__scrollTarget)
-        this.__scrollTarget = void 0
-      }
+      this.__changeScrollEvent()
     },
 
     __configureScrollTarget () {
-      if (this.anchorEl !== void 0 || this.scrollTarget !== void 0) {
-        this.__scrollTarget = getScrollTarget(this.anchorEl, this.scrollTarget)
+      if (this.showing === true && (this.anchorEl !== void 0 || this.scrollTarget !== void 0)) {
         const fn = this.noParentEvent === true
           ? this.updatePosition
           : this.hide
 
-        this.__changeScrollEvent(this.__scrollTarget, fn)
+        this.__changeScrollEvent(fn, getScrollTarget(this.anchorEl, this.scrollTarget))
       }
     },
 
@@ -223,18 +228,26 @@ export default Vue.extend({
         props: { name: this.transition }
       }, [
         this.showing === true ? h('div', {
-          staticClass: 'q-tooltip q-tooltip--style q-position-engine no-pointer-events',
-          class: this.contentClass,
-          style: this.contentStyle,
-          attrs: {
-            role: 'complementary'
-          }
-        }, slot(this, 'default')) : null
+          class: 'q-tooltip__container column no-pointer-events'
+        }, [
+          h('div', {
+            staticClass: 'q-tooltip q-tooltip--style scroll',
+            class: this.contentClass,
+            style: this.contentStyle,
+            attrs: {
+              role: 'complementary'
+            }
+          }, slot(this, 'default'))
+        ]) : null
       ])
     }
   },
 
   mounted () {
     this.__processModelChange(this.value)
+  },
+
+  beforeDestroy () {
+    this.settingPosition !== void 0 && cancelAnimationFrame(this.settingPosition)
   }
 })
diff --git a/ui/src/components/tooltip/QTooltip.json b/ui/src/components/tooltip/QTooltip.json
index 539bab5687c..e8a46937d98 100644
--- a/ui/src/components/tooltip/QTooltip.json
+++ b/ui/src/components/tooltip/QTooltip.json
@@ -6,16 +6,30 @@
   },
 
   "props": {
+    "min-height": {
+      "extends": "size",
+      "desc": "The minimum height of the Tooltip; Size in CSS units, including unit name",
+      "category": "style",
+      "addedIn": "v1.15.5"
+    },
+
+    "min-width": {
+      "extends": "size",
+      "desc": "The minimum width of the Tooltip; Size in CSS units, including unit name",
+      "category": "style",
+      "addedIn": "v1.15.5"
+    },
+
     "max-height": {
       "extends": "size",
       "desc": "The maximum height of the Tooltip; Size in CSS units, including unit name",
-      "category": "content"
+      "category": "style"
     },
 
     "max-width": {
       "extends": "size",
       "desc": "The maximum width of the Tooltip; Size in CSS units, including unit name",
-      "category": "content"
+      "category": "style"
     },
 
     "transition-show": {
diff --git a/ui/src/components/tooltip/QTooltip.sass b/ui/src/components/tooltip/QTooltip.sass
index 7b55c375afb..0f1f2a93916 100644
--- a/ui/src/components/tooltip/QTooltip.sass
+++ b/ui/src/components/tooltip/QTooltip.sass
@@ -1,18 +1,20 @@
-.q-tooltip--style
-  font-size: $tooltip-fontsize
-  color: $tooltip-color
-  background: $tooltip-background
-  border-radius: $tooltip-border-radius
-  text-transform: none
-  font-weight: normal
-
 .q-tooltip
-  z-index: $z-tooltip
-  position: fixed !important
-  overflow-y: auto
-  overflow-x: hidden
+  visibility: collapse
   padding: $tooltip-padding
 
+  &__container
+    position: fixed
+    z-index: $z-tooltip
+    contain: layout
+
+  &--style
+    font-size: $tooltip-fontsize
+    color: $tooltip-color
+    background: $tooltip-background
+    border-radius: $tooltip-border-radius
+    text-transform: none
+    font-weight: normal
+
   @media (max-width: $breakpoint-xs-max)
     font-size: $tooltip-mobile-fontsize
     padding: $tooltip-mobile-padding
diff --git a/ui/src/components/tooltip/QTooltip.styl b/ui/src/components/tooltip/QTooltip.styl
index 7b55c375afb..0f1f2a93916 100644
--- a/ui/src/components/tooltip/QTooltip.styl
+++ b/ui/src/components/tooltip/QTooltip.styl
@@ -1,18 +1,20 @@
-.q-tooltip--style
-  font-size: $tooltip-fontsize
-  color: $tooltip-color
-  background: $tooltip-background
-  border-radius: $tooltip-border-radius
-  text-transform: none
-  font-weight: normal
-
 .q-tooltip
-  z-index: $z-tooltip
-  position: fixed !important
-  overflow-y: auto
-  overflow-x: hidden
+  visibility: collapse
   padding: $tooltip-padding
 
+  &__container
+    position: fixed
+    z-index: $z-tooltip
+    contain: layout
+
+  &--style
+    font-size: $tooltip-fontsize
+    color: $tooltip-color
+    background: $tooltip-background
+    border-radius: $tooltip-border-radius
+    text-transform: none
+    font-weight: normal
+
   @media (max-width: $breakpoint-xs-max)
     font-size: $tooltip-mobile-fontsize
     padding: $tooltip-mobile-padding
diff --git a/ui/src/css/core/helpers.sass b/ui/src/css/core/helpers.sass
index 9126d8e7244..0550db64cfe 100644
--- a/ui/src/css/core/helpers.sass
+++ b/ui/src/css/core/helpers.sass
@@ -36,6 +36,14 @@
 .q-body--force-scrollbar
   overflow-y: scroll
 
+.q-portal__clone
+  position: fixed !important
+  transform: none !important
+  transition: none !important
+  flex-shrink: 0 !important
+  opacity: 0 !important
+  z-index: -1 !important
+
 .q-no-input-spinner
   -moz-appearance: textfield !important
   &::-webkit-outer-spin-button,
diff --git a/ui/src/css/core/helpers.styl b/ui/src/css/core/helpers.styl
index 9126d8e7244..0550db64cfe 100644
--- a/ui/src/css/core/helpers.styl
+++ b/ui/src/css/core/helpers.styl
@@ -36,6 +36,14 @@
 .q-body--force-scrollbar
   overflow-y: scroll
 
+.q-portal__clone
+  position: fixed !important
+  transform: none !important
+  transition: none !important
+  flex-shrink: 0 !important
+  opacity: 0 !important
+  z-index: -1 !important
+
 .q-no-input-spinner
   -moz-appearance: textfield !important
   &::-webkit-outer-spin-button,
diff --git a/ui/src/css/core/positioning.sass b/ui/src/css/core/positioning.sass
index 2a04f81666a..0334aa85855 100644
--- a/ui/src/css/core/positioning.sass
+++ b/ui/src/css/core/positioning.sass
@@ -92,10 +92,3 @@
   margin-right: 12px
 .on-right
   margin-left: 12px
-
-/* internal: */
-.q-position-engine
-  margin-top: var(--q-pe-top, 0) !important
-  margin-left: var(--q-pe-left, 0) !important
-  will-change: auto
-  visibility: collapse // needed for animation - is removed on first positioning
diff --git a/ui/src/css/core/positioning.styl b/ui/src/css/core/positioning.styl
index 2a04f81666a..0334aa85855 100644
--- a/ui/src/css/core/positioning.styl
+++ b/ui/src/css/core/positioning.styl
@@ -92,10 +92,3 @@
   margin-right: 12px
 .on-right
   margin-left: 12px
-
-/* internal: */
-.q-position-engine
-  margin-top: var(--q-pe-top, 0) !important
-  margin-left: var(--q-pe-left, 0) !important
-  will-change: auto
-  visibility: collapse // needed for animation - is removed on first positioning
diff --git a/ui/src/mixins/anchor.js b/ui/src/mixins/anchor.js
index 1c2421e00ca..d14dfeb23ba 100644
--- a/ui/src/mixins/anchor.js
+++ b/ui/src/mixins/anchor.js
@@ -1,8 +1,18 @@
 import { clearSelection } from '../utils/selection.js'
-import { addEvt, cleanEvt, prevent, listenOpts } from '../utils/event.js'
+import { addEvt, cleanEvt, prevent, listenOpts, eventOnAncestors } from '../utils/event.js'
 import { getTouchTarget } from '../utils/touch.js'
 import { isKeyCode } from '../utils/key-composition.js'
 
+const scrollListenerHandlers = []
+
+function scrollEventDispatcher (e) {
+  scrollListenerHandlers
+    .slice()
+    .forEach(fn => {
+      eventOnAncestors(e, fn.scrollTarget) === true && fn(e)
+    })
+}
+
 export default {
   props: {
     target: {
@@ -168,17 +178,32 @@ export default {
       }
     },
 
-    __changeScrollEvent (scrollTarget, fn) {
-      const fnProp = `${fn !== void 0 ? 'add' : 'remove'}EventListener`
-      const fnHandler = fn !== void 0 ? fn : this.__scrollFn
+    __changeScrollEvent (fn, scrollTarget) {
+      const hadHandlers = scrollListenerHandlers.length > 0
+
+      if (this.__scrollFn !== void 0) {
+        const index = scrollListenerHandlers.indexOf(this.__scrollFn)
+
+        if (index > -1) {
+          scrollListenerHandlers.splice(index, 1)
+        }
 
-      if (scrollTarget !== window) {
-        scrollTarget[fnProp]('scroll', fnHandler, listenOpts.passive)
+        this.__scrollFn = void 0
       }
 
-      window[fnProp]('scroll', fnHandler, listenOpts.passive)
+      if (fn !== void 0 && scrollTarget !== null && scrollTarget !== void 0) {
+        fn.scrollTarget = scrollTarget === window ? document : scrollTarget
+        scrollListenerHandlers.push(fn)
 
-      this.__scrollFn = fn
+        this.__scrollFn = fn
+      }
+
+      if (hadHandlers === true && scrollListenerHandlers.length === 0) {
+        window.removeEventListener('scroll', scrollEventDispatcher, listenOpts.passiveCapture)
+      }
+      else if (hadHandlers === false && scrollListenerHandlers.length > 0) {
+        window.addEventListener('scroll', scrollEventDispatcher, listenOpts.passiveCapture)
+      }
     }
   },
 
@@ -188,10 +213,8 @@ export default {
       typeof this.__unconfigureScrollTarget === 'function'
     ) {
       this.noParentEventWatcher = this.$watch('noParentEvent', () => {
-        if (this.__scrollTarget !== void 0) {
-          this.__unconfigureScrollTarget()
-          this.__configureScrollTarget()
-        }
+        this.__unconfigureScrollTarget()
+        this.__configureScrollTarget()
       })
     }
   },
diff --git a/ui/src/mixins/virtual-scroll.js b/ui/src/mixins/virtual-scroll.js
index 85c2a160436..b6d4aa8fe7b 100644
--- a/ui/src/mixins/virtual-scroll.js
+++ b/ui/src/mixins/virtual-scroll.js
@@ -1,4 +1,5 @@
 import debounce from '../utils/debounce.js'
+import { isBuggyRTLScroll } from '../utils/scroll.js'
 
 const aggBucketSize = 1000
 
@@ -13,30 +14,6 @@ const scrollToEdges = [
 
 const slice = Array.prototype.slice
 
-let buggyRTL = void 0
-
-// mobile Chrome takes the crown for this
-function detectBuggyRTL () {
-  const scroller = document.createElement('div')
-  const spacer = document.createElement('div')
-
-  scroller.setAttribute('dir', 'rtl')
-  scroller.style.width = '1px'
-  scroller.style.height = '1px'
-  scroller.style.overflow = 'auto'
-
-  spacer.style.width = '1000px'
-  spacer.style.height = '1px'
-
-  document.body.appendChild(scroller)
-  scroller.appendChild(spacer)
-  scroller.scrollLeft = -1000
-
-  buggyRTL = scroller.scrollLeft >= 0
-
-  scroller.remove()
-}
-
 function sumFn (acc, h) {
   return acc + h
 }
@@ -65,7 +42,7 @@ function getScrollDetails (
   if (horizontal === true) {
     if (parent === window) {
       details.scrollStart = window.pageXOffset || window.scrollX || document.body.scrollLeft || 0
-      details.scrollViewSize += window.innerWidth
+      details.scrollViewSize += document.documentElement.clientWidth
     }
     else {
       details.scrollStart = parentCalc.scrollLeft
@@ -74,13 +51,13 @@ function getScrollDetails (
     details.scrollMaxSize = parentCalc.scrollWidth
 
     if (rtl === true) {
-      details.scrollStart = (buggyRTL === true ? details.scrollMaxSize - details.scrollViewSize : 0) - details.scrollStart
+      details.scrollStart = (isBuggyRTLScroll() === true ? details.scrollMaxSize - details.scrollViewSize : 0) - details.scrollStart
     }
   }
   else {
     if (parent === window) {
       details.scrollStart = window.pageYOffset || window.scrollY || document.body.scrollTop || 0
-      details.scrollViewSize += window.innerHeight
+      details.scrollViewSize += document.documentElement.clientHeight
     }
     else {
       details.scrollStart = parentCalc.scrollTop
@@ -131,7 +108,7 @@ function setScroll (parent, scroll, horizontal, rtl) {
   if (parent === window) {
     if (horizontal === true) {
       if (rtl === true) {
-        scroll = (buggyRTL === true ? document.body.scrollWidth - window.innerWidth : 0) - scroll
+        scroll = (isBuggyRTLScroll() === true ? document.body.scrollWidth - document.documentElement.clientWidth : 0) - scroll
       }
       window.scrollTo(scroll, window.pageYOffset || window.scrollY || document.body.scrollTop || 0)
     }
@@ -141,7 +118,7 @@ function setScroll (parent, scroll, horizontal, rtl) {
   }
   else if (horizontal === true) {
     if (rtl === true) {
-      scroll = (buggyRTL === true ? parent.scrollWidth - parent.offsetWidth : 0) - scroll
+      scroll = (isBuggyRTLScroll() === true ? parent.scrollWidth - parent.offsetWidth : 0) - scroll
     }
     parent.scrollLeft = scroll
   }
@@ -518,7 +495,7 @@ export default {
 
       if (contentEl !== void 0) {
         const
-          children = slice.call(contentEl.children).filter(el => el.classList.contains('q-virtual-scroll--skip') === false),
+          children = slice.call(contentEl.children || []).filter(el => el.classList.contains('q-virtual-scroll--skip') === false), // fallback [] for IE
           childrenLength = children.length,
           sizeFn = this.virtualScrollHorizontal === true
             ? el => el.getBoundingClientRect().width
@@ -708,7 +685,6 @@ export default {
   },
 
   beforeMount () {
-    buggyRTL === void 0 && detectBuggyRTL()
     this.__onVirtualScrollEvt = debounce(this.__onVirtualScrollEvt, this.$q.platform.is.ios === true ? 120 : 35)
     this.__setVirtualScrollSize()
   },
diff --git a/ui/src/utils/event.js b/ui/src/utils/event.js
index 3cbfb416ec5..aaaacaa714a 100644
--- a/ui/src/utils/event.js
+++ b/ui/src/utils/event.js
@@ -76,6 +76,19 @@ export function getEventPath (e) {
   }
 }
 
+export function eventOnAncestors (e, el) {
+  const { target } = e
+
+  while (el !== null && el !== void 0) {
+    if (el === target) {
+      return true
+    }
+    el = el.parentNode
+  }
+
+  return false
+}
+
 // Reasonable defaults
 const
   LINE_HEIGHT = 40,
@@ -187,6 +200,7 @@ export default {
   rightClick,
   position,
   getEventPath,
+  eventOnAncestors,
   getMouseWheelDistance,
   stop,
   prevent,
diff --git a/ui/src/utils/position-engine.js b/ui/src/utils/position-engine.js
index 4a4027f68e2..5759bba61a8 100644
--- a/ui/src/utils/position-engine.js
+++ b/ui/src/utils/position-engine.js
@@ -1,7 +1,60 @@
-import { getScrollbarWidth } from './scroll.js'
 import { client } from '../plugins/Platform.js'
+import { isBuggyRTLScroll } from './scroll.js'
 
-let vpLeft, vpTop
+const SIDE_SPACE = 4 // how many pixels to reserve on the edge
+
+const horizontalPos = {
+  'start#ltr': 'left',
+  'start#rtl': 'right',
+  'end#ltr': 'right',
+  'end#rtl': 'left'
+}
+
+;['left', 'middle', 'right'].forEach(pos => {
+  horizontalPos[`${pos}#ltr`] = pos
+  horizontalPos[`${pos}#rtl`] = pos
+})
+
+function isFixedPositioned (el) {
+  while (el && el !== document) {
+    if (window.getComputedStyle(el).position === 'fixed') {
+      return true
+    }
+    el = el.parentNode
+  }
+
+  return false
+}
+
+function isDocumentScrollableX () {
+  return window.getComputedStyle(document.documentElement).overflowX !== 'hidden' &&
+    window.getComputedStyle(document.body).overflowX !== 'hidden'
+}
+
+function isDocumentScrollableY () {
+  return window.getComputedStyle(document.documentElement).overflowY !== 'hidden' &&
+    window.getComputedStyle(document.body).overflowY !== 'hidden'
+}
+
+function computeScrollLeft (fixedPositioned, viewport, rtl) {
+  if (fixedPositioned === true) {
+    return { vpLeft: viewport.offsetLeft, apLeft: viewport.offsetLeft }
+  }
+
+  const scrollLeft = window.pageXOffset || window.scrollX || document.body.scrollLeft || 0
+
+  if (rtl !== true) {
+    return { vpLeft: scrollLeft, apLeft: scrollLeft }
+  }
+
+  // TODO: check if the correction is needed also if isBuggyRTL
+  const buggyRTL = isBuggyRTLScroll()
+  const vpLeft = (buggyRTL === true ? 0 : document.documentElement.scrollWidth - document.documentElement.clientWidth) + scrollLeft
+  return {
+    vpLeft,
+    apLeft: vpLeft + document.documentElement.scrollWidth - document.documentElement.clientWidth
+  }
+}
 
 export function validatePosition (pos) {
   const parts = pos.split(' ')
@@ -20,7 +73,7 @@ export function validatePosition (pos) {
 }
 
 export function validateOffset (val) {
-  if (!val) { return true }
+  if (val !== true) { return true }
   if (val.length !== 2) { return false }
   if (typeof val[0] !== 'number' || typeof val[1] !== 'number') {
     return false
@@ -28,18 +81,6 @@ export function validateOffset (val) {
   return true
 }
 
-const horizontalPos = {
-  'start#ltr': 'left',
-  'start#rtl': 'right',
-  'end#ltr': 'right',
-  'end#rtl': 'left'
-}
-
-;[ 'left', 'middle', 'right' ].forEach(pos => {
-  horizontalPos[`${pos}#ltr`] = pos
-  horizontalPos[`${pos}#rtl`] = pos
-})
-
 export function parsePosition (pos, rtl) {
   const parts = pos.split(' ')
   return {
@@ -53,192 +94,288 @@ export function validateCover (val) {
   return validatePosition(val)
 }
 
-export function getAnchorProps (el, offset) {
+export function getAnchorProps (el, offset, rtlCorrection) {
   let { top, left, right, bottom, width, height } = el.getBoundingClientRect()
 
+  if (width === 0) {
+    width = el.offsetWidth
+  }
+  if (height === 0) {
+    height = el.offsetHeight
+  }
+
   if (offset !== void 0) {
-    top -= offset[1]
     left -= offset[0]
-    bottom += offset[1]
     right += offset[0]
+    top -= offset[1]
+    bottom += offset[1]
+  }
 
-    width += offset[0]
-    height += offset[1]
+  // TODO: check if the correction is needed also if isBuggyRTL
+  if (rtlCorrection === true) {
+    const diff = document.documentElement.scrollWidth - document.documentElement.clientWidth
+    left -= diff
+    right -= diff
   }
 
   return {
-    top,
     left,
+    middle: left + (right - left) / 2,
     right,
+
+    top,
+    center: top + (bottom - top) / 2,
     bottom,
+
+    leftRev: right,
+    middleRev: left + (right - left) / 2,
+    rightRev: left,
+
+    topRev: bottom,
+    centerRev: top + (bottom - top) / 2,
+    bottomRev: top,
+
     width,
-    height,
-    middle: left + (right - left) / 2,
-    center: top + (bottom - top) / 2
+    height
   }
 }
 
 export function getTargetProps (el) {
+  let { width, height } = el.getBoundingClientRect()
+
+  if (width === 0) {
+    width = el.offsetWidth
+  }
+  if (height === 0) {
+    height = el.offsetHeight
+  }
+
   return {
-    top: 0,
-    center: el.offsetHeight / 2,
-    bottom: el.offsetHeight,
-    left: 0,
-    middle: el.offsetWidth / 2,
-    right: el.offsetWidth
+    width,
+    height
   }
 }
 
-// cfg: { el, anchorEl, anchorOrigin, selfOrigin, offset, absoluteOffset, cover, fit, maxHeight, maxWidth }
+// cfg: { el, anchorEl, anchorOrigin, selfOrigin, offset, absoluteOffset, cover, fit, minHeight, minWidth, maxHeight, maxWidth, rtl }
 export function setPosition (cfg) {
-  if (client.is.ios === true && window.visualViewport !== void 0) {
-    // uses the q-position-engine CSS class
-
-    const el = document.body.style
-    const { offsetLeft: left, offsetTop: top } = window.visualViewport
+  let anchorProps, targetProps
 
-    if (left !== vpLeft) {
-      el.setProperty('--q-pe-left', left + 'px')
-      vpLeft = left
-    }
-    if (top !== vpTop) {
-      el.setProperty('--q-pe-top', top + 'px')
-      vpTop = top
-    }
-  }
-
-  let anchorProps
-
-  // scroll position might change
-  // if max-height/-width changes, so we
-  // need to restore it after we calculate
-  // the new positioning
-  const { scrollLeft, scrollTop } = cfg.el
+  const
+    extEl = cfg.el,
+    intEl = extEl.children[0],
+    firstRender = intEl.style.visibility !== 'visible',
+    fixedPositioned = isFixedPositioned(cfg.anchorEl),
+    anchorOrigin = { ...cfg.anchorOrigin },
+    selfOrigin = { ...cfg.selfOrigin },
+    viewport = fixedPositioned === true && client.is.ios === true && window.visualViewport !== void 0
+      ? window.visualViewport
+      : { offsetLeft: 0, offsetTop: 0 },
+    { vpLeft, apLeft } = computeScrollLeft(fixedPositioned, viewport, cfg.rtl),
+    vpTop = fixedPositioned === true
+      ? viewport.offsetTop
+      : (window.pageYOffset || window.scrollY || document.body.scrollTop || 0),
+    vpWidth = document.documentElement[fixedPositioned === true || isDocumentScrollableX() !== true ? 'clientWidth' : 'scrollWidth'],
+    vpHeight = document.documentElement[fixedPositioned === true || isDocumentScrollableY() !== true ? 'clientHeight' : 'scrollHeight']
 
   if (cfg.absoluteOffset === void 0) {
-    anchorProps = getAnchorProps(cfg.anchorEl, cfg.cover === true ? [0, 0] : cfg.offset)
+    anchorProps = getAnchorProps(cfg.anchorEl, cfg.cover === true ? [0, 0] : cfg.offset, cfg.rtl === true && fixedPositioned !== true)
   }
   else {
     const
+      leftOffset = cfg.rtl === true && fixedPositioned !== true
+        ? document.documentElement.scrollWidth - document.documentElement.clientWidth
+        : 0,
       { top: anchorTop, left: anchorLeft } = cfg.anchorEl.getBoundingClientRect(),
-      top = anchorTop + cfg.absoluteOffset.top,
-      left = anchorLeft + cfg.absoluteOffset.left
+      top = anchorTop + (cfg.cover === true ? 0 : cfg.absoluteOffset.top),
+      left = anchorLeft + (cfg.cover === true || cfg.fit === true ? 0 : cfg.absoluteOffset.left) - leftOffset
+
+    anchorProps = {
+      left,
+      middle: left,
+      right: left,
 
-    anchorProps = { top, left, width: 1, height: 1, right: left + 1, center: top, middle: left, bottom: top + 1 }
+      top,
+      center: top,
+      bottom: top,
+
+      leftRev: left,
+      middleRev: left,
+      rightRev: left,
+
+      topRev: top,
+      centerRev: top,
+      bottomRev: top,
+
+      width: 0,
+      height: 0
+    }
   }
 
-  let elStyle = {
-    maxHeight: cfg.maxHeight,
-    maxWidth: cfg.maxWidth,
-    visibility: 'visible'
+  const intElStyle = {
+    minWidth: cfg.minWidth || null,
+    minHeight: cfg.minHeight || null,
+    maxWidth: cfg.maxWidth || null,
+    maxHeight: cfg.maxHeight || null
   }
 
   if (cfg.fit === true || cfg.cover === true) {
-    elStyle.minWidth = anchorProps.width + 'px'
-    if (cfg.cover === true) {
-      elStyle.minHeight = anchorProps.height + 'px'
+    if (cfg.minWidth === null) {
+      intElStyle.minWidth = anchorProps.width + 'px'
+    }
+    if (cfg.cover === true && cfg.minHeight === null) {
+      intElStyle.minHeight = anchorProps.height + 'px'
     }
   }
 
-  Object.assign(cfg.el.style, elStyle)
-
-  const
-    targetProps = getTargetProps(cfg.el),
-    props = {
-      top: anchorProps[cfg.anchorOrigin.vertical] - targetProps[cfg.selfOrigin.vertical],
-      left: anchorProps[cfg.anchorOrigin.horizontal] - targetProps[cfg.selfOrigin.horizontal]
-    }
+  Object.assign(intEl.style, intElStyle)
 
-  applyBoundaries(props, anchorProps, targetProps, cfg.anchorOrigin, cfg.selfOrigin)
+  if (firstRender === true) {
+    const clone = intEl.cloneNode(true)
+    clone.classList.add('q-portal__clone')
+    document.body.appendChild(clone)
+    targetProps = getTargetProps(clone)
+    clone.remove()
+  }
+  else {
+    targetProps = getTargetProps(intEl)
+  }
 
-  elStyle = {
-    top: props.top + 'px',
-    left: props.left + 'px'
+  if (intElStyle.minWidth !== null && anchorProps.width > targetProps.width) {
+    intElStyle.minWidth = targetProps.width + 'px'
+  }
+  if (intElStyle.minHeight !== null && anchorProps.height > targetProps.height) {
+    intElStyle.minHeight = targetProps.height + 'px'
   }
 
-  if (props.maxHeight !== void 0) {
-    elStyle.maxHeight = props.maxHeight + 'px'
+  const extElStyle = {
+    position: fixedPositioned === true ? 'fixed' : 'absolute',
 
-    if (anchorProps.height > props.maxHeight) {
-      elStyle.minHeight = elStyle.maxHeight
-    }
+    left: null,
+    right: null,
+    marginLeft: null,
+    marginRight: null,
+    maxWidth: null,
+
+    top: null,
+    bottom: null,
+    marginTop: null,
+    marginBottom: null,
+    maxHeight: null
   }
-  if (props.maxWidth !== void 0) {
-    elStyle.maxWidth = props.maxWidth + 'px'
 
-    if (anchorProps.width > props.maxWidth) {
-      elStyle.minWidth = elStyle.maxWidth
-    }
+  const
+    halfWidth = Math.min(vpLeft + anchorProps[cfg.anchorOrigin.horizontal], vpWidth - apLeft - anchorProps[cfg.anchorOrigin.horizontal]) - SIDE_SPACE,
+    halfHeight = Math.min(vpTop + anchorProps[cfg.anchorOrigin.vertical], vpHeight - vpTop - anchorProps[cfg.anchorOrigin.vertical]) - SIDE_SPACE
+
+  // horizontal repositioning
+  if (
+    selfOrigin.horizontal === 'left' &&
+    targetProps.width + SIDE_SPACE > vpWidth - apLeft - anchorProps[anchorOrigin.horizontal] &&
+    vpLeft + anchorProps[anchorOrigin.horizontal + 'Rev'] > vpWidth - apLeft - anchorProps[anchorOrigin.horizontal]
+  ) {
+    selfOrigin.horizontal = 'right'
+    anchorOrigin.horizontal = anchorOrigin.horizontal + 'Rev'
+  }
+  else if (
+    selfOrigin.horizontal === 'right' &&
+    targetProps.width + SIDE_SPACE > vpLeft + anchorProps[anchorOrigin.horizontal] &&
+    vpWidth - apLeft - anchorProps[anchorOrigin.horizontal + 'Rev'] > vpLeft + anchorProps[anchorOrigin.horizontal]
+  ) {
+    selfOrigin.horizontal = 'left'
+    anchorOrigin.horizontal = anchorOrigin.horizontal + 'Rev'
+  }
+  else if (
+    selfOrigin.horizontal === 'middle' &&
+    targetProps.width / 2 > halfWidth
+  ) {
+    selfOrigin.horizontal = vpLeft + anchorProps[anchorOrigin.horizontal] < vpWidth / 2
+      ? 'left'
+      : 'right'
+    anchorOrigin.horizontal = selfOrigin.horizontal
   }
 
-  Object.assign(cfg.el.style, elStyle)
+  // horizontal styles
+  if (selfOrigin.horizontal === 'left') {
+    extElStyle.left = 0
+    extElStyle.marginLeft = `${vpLeft + anchorProps[anchorOrigin.horizontal]}px`
+    extElStyle.maxWidth = `${vpWidth - vpLeft - anchorProps[anchorOrigin.horizontal] - SIDE_SPACE}px`
+  }
+  else if (selfOrigin.horizontal === 'right') {
+    extElStyle.right = '100%'
+    extElStyle.marginRight = `-${vpLeft + anchorProps[anchorOrigin.horizontal]}px`
+    extElStyle.maxWidth = `${vpLeft + anchorProps[anchorOrigin.horizontal] - SIDE_SPACE}px`
+  }
+  else {
+    extElStyle.right = '100%'
+    extElStyle.marginRight = `-${vpLeft + anchorProps[anchorOrigin.horizontal]}px`
+  }
 
-  // restore scroll position
-  if (cfg.el.scrollTop !== scrollTop) {
-    cfg.el.scrollTop = scrollTop
+  // vertical repositioning
+  if (
+    selfOrigin.vertical === 'top' &&
+    targetProps.height + SIDE_SPACE > vpHeight - vpTop - anchorProps[anchorOrigin.vertical] &&
+    vpTop + anchorProps[anchorOrigin.vertical + 'Rev'] > vpHeight - vpTop - anchorProps[anchorOrigin.vertical]
+  ) {
+    selfOrigin.vertical = 'bottom'
+    anchorOrigin.vertical = anchorOrigin.vertical + 'Rev'
   }
-  if (cfg.el.scrollLeft !== scrollLeft) {
-    cfg.el.scrollLeft = scrollLeft
+  else if (
+    selfOrigin.vertical === 'bottom' &&
+    targetProps.height + SIDE_SPACE > vpTop + anchorProps[anchorOrigin.vertical] &&
+    vpHeight - vpTop - anchorProps[anchorOrigin.vertical + 'Rev'] > vpTop + anchorProps[anchorOrigin.vertical]
+  ) {
+    selfOrigin.vertical = 'top'
+    anchorOrigin.vertical = anchorOrigin.vertical + 'Rev'
+  }
+  else if (
+    selfOrigin.vertical === 'center' &&
+    targetProps.height / 2 > halfHeight
+  ) {
+    selfOrigin.vertical = vpTop + anchorProps[anchorOrigin.vertical] < vpHeight / 2
+      ? 'top'
+      : 'bottom'
+    anchorOrigin.vertical = selfOrigin.vertical
   }
-}
 
-function applyBoundaries (props, anchorProps, targetProps, anchorOrigin, selfOrigin) {
-  const
-    currentHeight = targetProps.bottom,
-    currentWidth = targetProps.right,
-    margin = getScrollbarWidth(),
-    innerHeight = window.innerHeight - margin,
-    innerWidth = document.body.clientWidth
-
-  if (props.top < 0 || props.top + currentHeight > innerHeight) {
-    if (selfOrigin.vertical === 'center') {
-      props.top = anchorProps[anchorOrigin.vertical] > innerHeight / 2
-        ? Math.max(0, innerHeight - currentHeight)
-        : 0
-      props.maxHeight = Math.min(currentHeight, innerHeight)
-    }
-    else if (anchorProps[anchorOrigin.vertical] > innerHeight / 2) {
-      const anchorY = Math.min(
-        innerHeight,
-        anchorOrigin.vertical === 'center'
-          ? anchorProps.center
-          : (anchorOrigin.vertical === selfOrigin.vertical ? anchorProps.bottom : anchorProps.top)
-      )
-      props.maxHeight = Math.min(currentHeight, anchorY)
-      props.top = Math.max(0, anchorY - currentHeight)
-    }
-    else {
-      props.top = Math.max(0, anchorOrigin.vertical === 'center'
-        ? anchorProps.center
-        : (anchorOrigin.vertical === selfOrigin.vertical ? anchorProps.top : anchorProps.bottom)
-      )
-      props.maxHeight = Math.min(currentHeight, innerHeight - props.top)
-    }
+  // vertical styles
+  if (selfOrigin.vertical === 'top') {
+    extElStyle.top = 0
+    extElStyle.marginTop = `${vpTop + anchorProps[anchorOrigin.vertical]}px`
+    extElStyle.maxHeight = `${vpHeight - vpTop - anchorProps[anchorOrigin.vertical] - SIDE_SPACE}px`
+  }
+  else if (selfOrigin.vertical === 'bottom') {
+    extElStyle.bottom = '100%'
+    extElStyle.marginBottom = `-${vpTop + anchorProps[anchorOrigin.vertical]}px`
+    extElStyle.maxHeight = `${vpTop + anchorProps[anchorOrigin.vertical] - SIDE_SPACE}px`
+  }
+  else {
+    extElStyle.bottom = '100%'
+    extElStyle.marginBottom = `-${vpTop + anchorProps[anchorOrigin.vertical]}px`
   }
 
-  if (props.left < 0 || props.left + currentWidth > innerWidth) {
-    props.maxWidth = Math.min(currentWidth, innerWidth)
-    if (selfOrigin.horizontal === 'middle') {
-      props.left = anchorProps[anchorOrigin.horizontal] > innerWidth / 2
-        ? Math.max(0, innerWidth - currentWidth)
-        : 0
-    }
-    else if (anchorProps[anchorOrigin.horizontal] > innerWidth / 2) {
-      const anchorX = Math.min(
-        innerWidth,
-        anchorOrigin.horizontal === 'middle'
-          ? anchorProps.middle
-          : (anchorOrigin.horizontal === selfOrigin.horizontal ? anchorProps.right : anchorProps.left)
-      )
-      props.maxWidth = Math.min(currentWidth, anchorX)
-      props.left = Math.max(0, anchorX - props.maxWidth)
-    }
-    else {
-      props.left = Math.max(0, anchorOrigin.horizontal === 'middle'
-        ? anchorProps.middle
-        : (anchorOrigin.horizontal === selfOrigin.horizontal ? anchorProps.left : anchorProps.right)
-      )
-      props.maxWidth = Math.min(currentWidth, innerWidth - props.left)
-    }
+  if (selfOrigin.horizontal === 'middle' && selfOrigin.vertical === 'center') {
+    intElStyle.transform = 'translate(50%, 50%)'
+    extElStyle.transformOrigin = '100% 100%'
+  }
+  else if (selfOrigin.horizontal === 'middle') {
+    intElStyle.transform = 'translateX(50%)'
+    extElStyle.transformOrigin = '100% 50%'
+  }
+  else if (selfOrigin.vertical === 'center') {
+    intElStyle.transform = 'translateY(50%)'
+    extElStyle.transformOrigin = '50% 100%'
+  }
+  else {
+    intElStyle.transform = null
+    extElStyle.transformOrigin = '50% 50%'
+  }
+
+  Object.assign(extEl.style, extElStyle)
+  Object.assign(intEl.style, intElStyle)
+
+  if (firstRender === true) {
+    requestAnimationFrame(() => {
+      intEl.style.visibility = 'visible'
+    })
   }
 }
diff --git a/ui/src/utils/scroll.js b/ui/src/utils/scroll.js
index 1046242f291..588f170c150 100644
--- a/ui/src/utils/scroll.js
+++ b/ui/src/utils/scroll.js
@@ -5,6 +5,40 @@ const scrollTargets = isSSR === false
   ? [ null, document, document.body, document.scrollingElement, document.documentElement ]
   : []
 
+let buggyRTLScroll
+export function isBuggyRTLScroll () {
+  if (isSSR === true) {
+    return false
+  }
+
+  if (buggyRTLScroll === void 0) {
+    const scroller = document.createElement('div')
+    const spacer = document.createElement('div')
+
+    Object.assign(scroller.style, {
+      direction: 'rtl',
+      width: '1px',
+      height: '1px',
+      overflow: 'auto'
+    })
+
+    Object.assign(spacer.style, {
+      width: '1000px',
+      height: '1px'
+    })
+
+    scroller.appendChild(spacer)
+    document.body.appendChild(scroller)
+    scroller.scrollLeft = -1000
+
+    buggyRTLScroll = scroller.scrollLeft >= 0
+
+    scroller.remove()
+  }
+
+  return buggyRTLScroll
+}
+
 export function getScrollTarget (el, target) {
   if (typeof target === 'string') {
     try {
@@ -195,6 +229,7 @@ export default {
 
   getScrollPosition,
   getHorizontalScrollPosition,
+  isBuggyRTLScroll,
 
   animScrollTo,
   animHorizontalScrollTo,
diff --git a/ui/types/utils/event.d.ts b/ui/types/utils/event.d.ts
index 65096966a0d..1b8a92ba05b 100644
--- a/ui/types/utils/event.d.ts
+++ b/ui/types/utils/event.d.ts
@@ -20,6 +20,7 @@ export namespace event {
   function rightClick(evt: MouseEvent): boolean;
   function position(evt: TouchEvent): { top: number; left: number };
   function getEventPath(evt: Event): EventTarget[];
+  function eventOnAncestors(evt: Event, el: Element | null | undefined): boolean;
   function getMouseWheelDistance(evt: WheelEvent): { x: number; y: number };
   function stop(evt: Event): void;
   function prevent(evt: Event): void;
diff --git a/ui/types/utils/scroll.d.ts b/ui/types/utils/scroll.d.ts
index ceb94880783..9bfaaad8c27 100644
--- a/ui/types/utils/scroll.d.ts
+++ b/ui/types/utils/scroll.d.ts
@@ -8,6 +8,7 @@ export namespace scroll {
 
   function getScrollPosition(scrollTarget: Element | Window): number;
   function getHorizontalScrollPosition(scrollTarget: Element | Window): number;
+  function isBuggyRTLScroll(): boolean;
 
   function animScrollTo(el: Element | Window, to: number, duration: number): void;
   function animHorizontalScrollTo(el: Element | Window, to: number, duration: number): void;