From 498010caccf74d5c4bae3872f6dbff35cbe6b626 Mon Sep 17 00:00:00 2001
From: Dan Popescu <pdan.popescu@gmail.com>
Date: Sat, 5 Jun 2021 11:19:31 +0300
Subject: [PATCH] feat(position engine): improve positioning #8175, #8191,
 #8343, #8554, #10583, #12414

---
 ui/dev/src/index.template.html                |   2 +-
 .../pages/components/menu-2-nested-divs.vue   | 137 +++++
 .../components/menu-label-activation.vue      | 512 ++++++++++++++++++
 ui/dev/src/pages/components/menu.vue          | 191 +++++--
 ui/dev/src/pages/form/date-part1-basic.vue    |   4 +-
 ui/dev/src/pages/global/dialog.vue            |  16 +
 .../src/pages/web-tests/menu-positioning.vue  |  75 +++
 ui/src/components/field/QField.js             |   1 -
 ui/src/components/menu/QMenu.js               | 105 ++--
 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           |   8 +-
 ui/src/components/select/QSelect.sass         |   4 +-
 ui/src/components/select/QSelect.styl         |   4 +-
 ui/src/components/tooltip/QTooltip.js         |  67 ++-
 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/directives/TouchPan.js                 |  23 +-
 ui/src/mixins/anchor.js                       |  67 ++-
 ui/src/mixins/model-toggle.js                 |  39 +-
 ui/src/utils/event.js                         |  14 +
 ui/src/utils/private/position-engine.js       | 487 ++++++++++-------
 ui/src/utils/scroll.js                        |   2 +-
 ui/types/utils/event.d.ts                     |   1 +
 30 files changed, 1519 insertions(+), 388 deletions(-)
 create mode 100644 ui/dev/src/pages/components/menu-2-nested-divs.vue
 create mode 100644 ui/dev/src/pages/components/menu-label-activation.vue
 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 2cc87503b041..f67f327f5b6a 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-2-nested-divs.vue b/ui/dev/src/pages/components/menu-2-nested-divs.vue
new file mode 100644
index 000000000000..16a84c63ee16
--- /dev/null
+++ b/ui/dev/src/pages/components/menu-2-nested-divs.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="q-layout-padding text-white">
+    <div class="bg-green-9 q-pa-sm" style="width: 300px; height: 180px;">
+      Click Here
+
+      <q-menu touch-position>
+        <q-list dense style="min-width: 250px" class="bg-grey text-white">
+          <q-item clickable v-close-popup>
+            <q-item-section>Menu Item 1</q-item-section>
+          </q-item>
+
+          <q-item clickable v-close-popup>
+            <q-item-section>Menu Item 2</q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+
+      <div class="bg-blue-9 q-pa-sm q-mt-md" style="width: 50%; height: 50%;">
+        Click Here
+
+        <q-menu touch-position>
+          <q-list dense style="min-width: 100px">
+            <q-item clickable>
+              <q-item-section>Menu Item 1</q-item-section>
+            </q-item>
+
+            <q-item clickable v-close-popup>
+              <q-item-section>Close</q-item-section>
+            </q-item>
+          </q-list>
+
+          <q-btn class="full-width" flat label="Menu">
+            <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>
+
+                <q-item clickable>
+                  <q-item-section>Submenu Label</q-item-section>
+                  <q-item-section side>
+                    <q-icon name="keyboard_arrow_right" />
+                  </q-item-section>
+
+                  <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>
+
+                      <q-item clickable v-close-popup="2">
+                        <q-item-section>Close</q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-menu>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-menu>
+      </div>
+    </div>
+
+    <div class="bg-green-9 q-pa-sm q-mt-xl" style="width: 300px; height: 180px;">
+      ContextMenu Here
+
+      <q-menu touch-position context-menu>
+        <q-list dense style="min-width: 250px" class="bg-grey text-white">
+          <q-item clickable v-close-popup>
+            <q-item-section>Menu Item 1</q-item-section>
+          </q-item>
+
+          <q-item clickable v-close-popup>
+            <q-item-section>Menu Item 2</q-item-section>
+          </q-item>
+
+          <q-item clickable v-close-popup>
+            <q-item-section>Menu Item 3</q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+
+      <div class="bg-blue-9 q-pa-sm q-mt-md" style="width: 50%; height: 50%;">
+        ContextMenu Here
+
+        <q-menu touch-position context-menu>
+          <q-list dense style="min-width: 100px">
+            <q-item clickable>
+              <q-item-section>Menu Item 1</q-item-section>
+            </q-item>
+
+            <q-item clickable v-close-popup>
+              <q-item-section>Close</q-item-section>
+            </q-item>
+          </q-list>
+
+          <q-btn class="full-width" flat label="Menu">
+            <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>
+
+                <q-item clickable>
+                  <q-item-section>Submenu Label</q-item-section>
+                  <q-item-section side>
+                    <q-icon name="keyboard_arrow_right" />
+                  </q-item-section>
+
+                  <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>
+
+                      <q-item clickable v-close-popup="2">
+                        <q-item-section>Close</q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-menu>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-menu>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {}
+  }
+}
+</script>
diff --git a/ui/dev/src/pages/components/menu-label-activation.vue b/ui/dev/src/pages/components/menu-label-activation.vue
new file mode 100644
index 000000000000..9460b2e4688e
--- /dev/null
+++ b/ui/dev/src/pages/components/menu-label-activation.vue
@@ -0,0 +1,512 @@
+<template>
+  <div class="q-pa-xl column q-gutter-y-md text-dark">
+    <q-btn unelavated color="primary" label="Open dialog" @click="dialog = true" />
+
+    <q-input
+      v-model="value"
+      dense
+      autogrow
+      outlined
+      label="Click on field, on text or on icon (cursor pointer or text)"
+    >
+      <template v-slot:append>
+        <q-icon name="mdi-menu-down" />
+      </template>
+
+      <q-menu no-refocus no-focus fit>
+        <q-list dense>
+          <q-item>
+            <q-item-section>
+              <q-item-label>
+                Menu in QInput
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+    </q-input>
+
+    <div class="q-pa-lg bg-yellow">
+      <label class="q-pa-sm bg-grey-2 row items-center">
+        Label (without for) for textarea inside
+
+        <textarea class="on-right">Textarea (without id) inside label</textarea>
+
+        <q-menu no-refocus no-focus fit>
+          <q-list dense>
+            <q-item>
+              <q-item-section>
+                <q-item-label>
+                  Menu in label
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </label>
+
+      <q-menu no-refocus no-focus fit>
+        <q-list dense>
+          <q-item>
+            <q-item-section>
+              <q-item-label>
+                Menu outside label (yellow)
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+    </div>
+
+    <div class="q-pa-lg bg-yellow">
+      <label class="q-pa-sm bg-grey-2 row items-center" for="test1">
+        Label (with for) for textarea inside
+
+        <textarea id="test1" class="on-right">Textare (with id) inside label</textarea>
+
+        <q-menu no-refocus no-focus fit>
+          <q-list dense>
+            <q-item>
+              <q-item-section>
+                <q-item-label>
+                  Menu in label
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </label>
+
+      <q-menu no-refocus no-focus fit>
+        <q-list dense>
+          <q-item>
+            <q-item-section>
+              <q-item-label>
+                Menu outside label (yellow)
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+    </div>
+
+    <div class="q-pa-lg bg-yellow">
+      <div class="q-pa-lg bg-grey-4 row items-center">
+        <label class="q-pa-sm bg-grey-2 on-left" for="test2">
+          Label (with for) for textarea outside - has menu but should not show except iOS
+
+          <q-menu no-refocus no-focus fit>
+            <q-list dense>
+              <q-item>
+                <q-item-section>
+                  <q-item-label>
+                    Menu in label
+                  </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </label>
+
+        <textarea id="test2">Textare outside label</textarea>
+
+        <q-menu no-refocus no-focus fit>
+          <q-list dense>
+            <q-item>
+              <q-item-section>
+                <q-item-label>
+                  Menu outside (grey)
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </div>
+
+      <q-menu no-refocus no-focus fit>
+        <q-list dense>
+          <q-item>
+            <q-item-section>
+              <q-item-label>
+                Menu outside (yellow)
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+    </div>
+
+    <div class="q-pa-lg bg-yellow">
+      <div class="q-pa-lg bg-grey-4 row items-center">
+        <label class="q-pa-sm bg-grey-2 on-left">
+          Label (without for)
+
+          <q-menu no-refocus no-focus fit>
+            <q-list dense>
+              <q-item>
+                <q-item-section>
+                  <q-item-label>
+                    Menu in label
+                  </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </label>
+
+        <textarea>Textare outside label</textarea>
+
+        <q-menu no-refocus no-focus fit>
+          <q-list dense>
+            <q-item>
+              <q-item-section>
+                <q-item-label>
+                  Menu outside (grey)
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </div>
+
+      <q-menu no-refocus no-focus fit>
+        <q-list dense>
+          <q-item>
+            <q-item-section>
+              <q-item-label>
+                Menu outside (yellow)
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+    </div>
+
+    <div class="q-pa-lg bg-yellow">
+      <div class="q-pa-lg bg-grey-2">
+        <label class="q-pa-sm bg-grey-4" for="test3">
+          Label (with for) for textarea outside - has menu but should not show except iOS
+
+          <q-menu no-refocus no-focus fit>
+            <q-list dense>
+              <q-item>
+                <q-item-section>
+                  <q-item-label>
+                    Menu in label
+                  </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </label>
+
+        <q-menu no-refocus no-focus fit>
+          <q-list dense>
+            <q-item>
+              <q-item-section>
+                <q-item-label>
+                  Menu outside (grey)
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </div>
+
+      <div class="q-pa-lg bg-grey-4">
+        <textarea id="test3">Textarea (with id) outside label</textarea>
+
+        <q-menu no-refocus no-focus fit>
+          <q-list dense>
+            <q-item>
+              <q-item-section>
+                <q-item-label>
+                  Menu outside (grey)
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </div>
+
+      <q-menu no-refocus no-focus fit>
+        <q-list dense>
+          <q-item>
+            <q-item-section>
+              <q-item-label>
+                Menu outside (yellow)
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+    </div>
+
+    <q-dialog v-model="dialog">
+      <q-card class="text-dark bg-grey-8">
+        <q-card-section>
+          <q-input
+            v-model="value"
+            dense
+            autogrow
+            outlined
+            label="Click on field, on text or on icon (cursor pointer or text)"
+          >
+            <template v-slot:append>
+              <q-icon name="mdi-menu-down" />
+            </template>
+
+            <q-menu no-refocus no-focus fit>
+              <q-list dense>
+                <q-item>
+                  <q-item-section>
+                    <q-item-label>
+                      Menu in QInput
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-input>
+        </q-card-section>
+
+        <q-card-section>
+          <div class="q-pa-lg bg-yellow">
+            <label class="q-pa-sm bg-grey-2 row items-center">
+              Label (without for) for textarea inside
+
+              <textarea class="on-right">Textarea (without id) inside label</textarea>
+
+              <q-menu no-refocus no-focus fit>
+                <q-list dense>
+                  <q-item>
+                    <q-item-section>
+                      <q-item-label>
+                        Menu in label
+                      </q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </label>
+
+            <q-menu no-refocus no-focus fit>
+              <q-list dense>
+                <q-item>
+                  <q-item-section>
+                    <q-item-label>
+                      Menu outside label (yellow)
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </div>
+        </q-card-section>
+
+        <q-card-section>
+          <div class="q-pa-lg bg-yellow">
+            <label class="q-pa-sm bg-grey-2 row items-center" for="testd1">
+              Label (with for) for textarea inside
+
+              <textarea id="testd1" class="on-right">Textare (with id) inside label</textarea>
+
+              <q-menu no-refocus no-focus fit>
+                <q-list dense>
+                  <q-item>
+                    <q-item-section>
+                      <q-item-label>
+                        Menu in label
+                      </q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </label>
+
+            <q-menu no-refocus no-focus fit>
+              <q-list dense>
+                <q-item>
+                  <q-item-section>
+                    <q-item-label>
+                      Menu outside label (yellow)
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </div>
+        </q-card-section>
+
+        <q-card-section>
+          <div class="q-pa-lg bg-yellow">
+            <div class="q-pa-lg bg-grey-4 row items-center">
+              <label class="q-pa-sm bg-grey-2 on-left" for="testd2">
+                Label (with for) for textarea outside - has menu but should not show except iOS
+
+                <q-menu no-refocus no-focus fit>
+                  <q-list dense>
+                    <q-item>
+                      <q-item-section>
+                        <q-item-label>
+                          Menu in label
+                        </q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </label>
+
+              <textarea id="testd2">Textare outside label</textarea>
+
+              <q-menu no-refocus no-focus fit>
+                <q-list dense>
+                  <q-item>
+                    <q-item-section>
+                      <q-item-label>
+                        Menu outside (grey)
+                      </q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </div>
+
+            <q-menu no-refocus no-focus fit>
+              <q-list dense>
+                <q-item>
+                  <q-item-section>
+                    <q-item-label>
+                      Menu outside (yellow)
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </div>
+        </q-card-section>
+
+        <q-card-section>
+          <div class="q-pa-lg bg-yellow">
+            <div class="q-pa-lg bg-grey-4 row items-center">
+              <label class="q-pa-sm bg-grey-2 on-left">
+                Label (without for)
+
+                <q-menu no-refocus no-focus fit>
+                  <q-list dense>
+                    <q-item>
+                      <q-item-section>
+                        <q-item-label>
+                          Menu in label
+                        </q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </label>
+
+              <textarea>Textare outside label</textarea>
+
+              <q-menu no-refocus no-focus fit>
+                <q-list dense>
+                  <q-item>
+                    <q-item-section>
+                      <q-item-label>
+                        Menu outside (grey)
+                      </q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </div>
+
+            <q-menu no-refocus no-focus fit>
+              <q-list dense>
+                <q-item>
+                  <q-item-section>
+                    <q-item-label>
+                      Menu outside (yellow)
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </div>
+        </q-card-section>
+
+        <q-card-section>
+          <div class="q-pa-lg bg-yellow">
+            <div class="q-pa-lg bg-grey-2">
+              <label class="q-pa-sm bg-grey-4" for="testd3">
+                Label (with for) for textarea outside - has menu but should not show except iOS
+
+                <q-menu no-refocus no-focus fit>
+                  <q-list dense>
+                    <q-item>
+                      <q-item-section>
+                        <q-item-label>
+                          Menu in label
+                        </q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </label>
+
+              <q-menu no-refocus no-focus fit>
+                <q-list dense>
+                  <q-item>
+                    <q-item-section>
+                      <q-item-label>
+                        Menu outside (grey)
+                      </q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </div>
+
+            <div class="q-pa-lg bg-grey-4">
+              <textarea id="testd3">Textarea (with id) outside label</textarea>
+
+              <q-menu no-refocus no-focus fit>
+                <q-list dense>
+                  <q-item>
+                    <q-item-section>
+                      <q-item-label>
+                        Menu outside (grey)
+                      </q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </div>
+
+            <q-menu no-refocus no-focus fit>
+              <q-list dense>
+                <q-item>
+                  <q-item-section>
+                    <q-item-label>
+                      Menu outside (yellow)
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      value: '',
+      dialog: false
+    }
+  }
+}
+</script>
diff --git a/ui/dev/src/pages/components/menu.vue b/ui/dev/src/pages/components/menu.vue
index 98dfbb365184..38244f080714 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>
@@ -37,7 +51,7 @@
             ref="popover11"
             persistent
             transition-show="jump-up"
-            anchor="top right"
+            anchor="top end"
             @show="log('@show popover11 decoupled')"
             @hide="log('@hide popover11 decoupled')"
           >
@@ -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,15 +100,16 @@
                 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 use-input" clearable use-input autofocus />
               <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 />
               <q-select v-model="selectModelS" :options="selectOptions" behavior="dialog" filled label="Select single - dialog" clearable />
@@ -140,7 +155,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 +165,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 +181,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 +209,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 +296,9 @@
                 :cover="cover"
                 :anchor="anchor"
                 :self="self"
+                :offset="calculatedOffset"
                 auto-close
+                v-bind="transition"
               >
                 <q-list style="min-width: 400px">
                   <q-item
@@ -214,7 +307,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 +318,8 @@
                 :cover="cover"
                 :anchor="anchor"
                 :self="self"
+                :offset="calculatedOffset"
+                v-bind="transition"
               >
                 <q-list>
                   <q-item
@@ -234,7 +329,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 +361,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 +413,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,7 +433,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>
@@ -354,7 +456,14 @@
           </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"
@@ -363,7 +472,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>
@@ -387,7 +496,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>
@@ -405,7 +514,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>
@@ -448,7 +557,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>
@@ -479,7 +588,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
@@ -497,7 +606,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"
@@ -515,11 +624,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
                             >
@@ -537,7 +646,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">
@@ -552,8 +661,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" persistent>
           <q-img
             src="https://cdn.quasar.dev/img/map.png"
             style="height: 150px; width: 200px;"
@@ -563,8 +672,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" persistent>
           <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()" />
@@ -574,8 +683,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" persistent>
         <q-list style="min-width: 200px">
           <q-item
             v-for="n in 20"
@@ -583,7 +692,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>
@@ -604,6 +713,7 @@ export default {
       gigi: '',
       fit: false,
       cover: false,
+      offset: false,
       toggle: true,
       anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
       selfOrigin: { vertical: 'top', horizontal: 'left' },
@@ -628,7 +738,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: {
@@ -637,6 +755,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/form/date-part1-basic.vue b/ui/dev/src/pages/form/date-part1-basic.vue
index 27502bd03ddf..51e53a00690e 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 cover 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 cover ref="qDateProxy2">
                 <q-time
diff --git a/ui/dev/src/pages/global/dialog.vue b/ui/dev/src/pages/global/dialog.vue
index 9f0b9f274ceb..f5bd2c59b54b 100644
--- a/ui/dev/src/pages/global/dialog.vue
+++ b/ui/dev/src/pages/global/dialog.vue
@@ -674,6 +674,13 @@
             label="Select"
             clearable
           />
+          <q-select
+            v-model="select"
+            :options="selectOptions"
+            label="Select - menu mode"
+            behavior="menu"
+            clearable
+          />
         </q-card-section>
 
         <q-separator inset />
@@ -693,6 +700,15 @@
             @filter="filterFn"
             clearable
           />
+          <q-select
+            v-model="select"
+            :options="selectOptionsFiltered"
+            use-input
+            label="Select - Use input - menu mode"
+            behavior="menu"
+            @filter="filterFn"
+            clearable
+          />
           <q-input v-model="text1" autofocus label="Text 1" clearable />
           <q-input v-model="text2" label="Text 2" clearable />
           <q-input v-model="text3" type="textarea" label="Text 3 - textarea" clearable />
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 000000000000..e03e6b34091c
--- /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: 200px"></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/field/QField.js b/ui/src/components/field/QField.js
index eea779c5b9de..d587c39aa338 100644
--- a/ui/src/components/field/QField.js
+++ b/ui/src/components/field/QField.js
@@ -541,7 +541,6 @@ export default Vue.extend({
 
   render (h) {
     this.__onPreRender !== void 0 && this.__onPreRender()
-    this.__onPostRender !== void 0 && this.$nextTick(this.__onPostRender)
 
     const attrs = this.__getControl === void 0 && this.$scopedSlots.control === void 0
       ? {
diff --git a/ui/src/components/menu/QMenu.js b/ui/src/components/menu/QMenu.js
index 04d3c3752f06..e51e40fa29f9 100644
--- a/ui/src/components/menu/QMenu.js
+++ b/ui/src/components/menu/QMenu.js
@@ -69,7 +69,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,
@@ -167,7 +179,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) {
@@ -185,15 +197,20 @@ export default Vue.extend({
 
       this.$el.dispatchEvent(create('popup-show', { bubbles: true }))
 
-      // IE can have null document.activeElement
-      if (this.noFocus !== true && document.activeElement !== null) {
-        document.activeElement.blur()
-      }
+      if (this.noFocus !== true) {
+        // IE can have null document.activeElement
+        document.activeElement !== null && document.activeElement.blur()
 
-      this.__registerTick(() => {
-        this.updatePosition()
-        this.noFocus !== true && this.focus()
-      })
+        this.__registerTick(() => {
+          this.focus()
+          this.updatePosition()
+        })
+      }
+      else {
+        this.__registerTick(() => {
+          this.updatePosition()
+        })
+      }
 
       this.__registerTimeout(() => {
         // required in order to avoid the "double-tap needed" issue
@@ -204,8 +221,7 @@ export default Vue.extend({
           this.__portal.$el.click()
         }
 
-        this.updatePosition()
-        this.__showPortal(true) // done showing
+        this.__showPortal(true)
         this.$emit('show', evt)
       }, 300)
     },
@@ -213,7 +229,6 @@ export default Vue.extend({
     __hide (evt) {
       this.__removeTick()
       this.__anchorCleanup(true)
-      this.__hidePortal()
 
       // check null for IE
       if (
@@ -237,7 +252,7 @@ export default Vue.extend({
 
       // should __removeTimeout() if this gets removed
       this.__registerTimeout(() => {
-        this.__hidePortal(true) // done hiding, now destroy
+        this.__hidePortal()
         this.$emit('hide', evt)
       }, 300)
     },
@@ -257,16 +272,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))
       }
     },
 
@@ -294,17 +305,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
       })
     },
 
@@ -317,7 +337,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
         ) {
           stopAndPrevent(e)
           this.$q.interaction.preventClick(e.target, true)
@@ -331,18 +351,22 @@ export default Vue.extend({
         props: { ...this.transitionProps }
       }, [
         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
       ])
     }
   },
@@ -358,6 +382,7 @@ export default Vue.extend({
 
   beforeDestroy () {
     this.__refocusTarget = void 0
+    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) {
diff --git a/ui/src/components/menu/QMenu.json b/ui/src/components/menu/QMenu.json
index 2efe7fe48e30..601043ee273c 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 86fa23c1537f..b7335a3919f2 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
   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
+  opacity: 0
+
+  &__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 86fa23c1537f..b7335a3919f2 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
   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
+  opacity: 0
+
+  &__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 d97e3009b9d5..602edeea1bad 100755
--- a/ui/src/components/select/QSelect.js
+++ b/ui/src/components/select/QSelect.js
@@ -953,7 +953,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
         )
     },
@@ -1610,14 +1610,10 @@ export default Vue.extend({
         : this.transitionShow
     },
 
-    __onPostRender () {
+    updateMenuPosition () {
       if (this.dialog === false && this.$refs.menu !== void 0) {
         this.$refs.menu.updatePosition()
       }
-    },
-
-    updateMenuPosition () {
-      this.__onPostRender()
     }
   },
 
diff --git a/ui/src/components/select/QSelect.sass b/ui/src/components/select/QSelect.sass
index 106958a5fadc..936847ac5825 100644
--- a/ui/src/components/select/QSelect.sass
+++ b/ui/src/components/select/QSelect.sass
@@ -71,7 +71,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
 
@@ -91,4 +91,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 106958a5fadc..936847ac5825 100644
--- a/ui/src/components/select/QSelect.styl
+++ b/ui/src/components/select/QSelect.styl
@@ -71,7 +71,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
 
@@ -91,4 +91,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 29e6c1681a5e..69d8c9ab1e97 100644
--- a/ui/src/components/tooltip/QTooltip.js
+++ b/ui/src/components/tooltip/QTooltip.js
@@ -22,6 +22,15 @@ export default Vue.extend({
   mixins: [ AnchorMixin, TimeoutMixin, ModelToggleMixin, PortalMixin, TransitionMixin ],
 
   props: {
+    minHeight: {
+      type: String,
+      default: null
+    },
+    minWidth: {
+      type: String,
+      default: null
+    },
+
     maxHeight: {
       type: String,
       default: null
@@ -88,8 +97,6 @@ export default Vue.extend({
       this.__showPortal()
 
       this.__registerTick(() => {
-        this.observer = new MutationObserver(() => this.updatePosition())
-        this.observer.observe(this.__portal.$el, { attributes: false, childList: true, characterData: true, subtree: true })
         this.updatePosition()
         this.__configureScrollTarget()
       })
@@ -121,11 +128,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
@@ -147,14 +149,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
       })
     },
 
@@ -203,20 +212,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))
       }
     },
 
@@ -225,11 +230,15 @@ export default Vue.extend({
         props: { ...this.transitionProps }
       }, [
         this.showing === true ? h('div', {
-          staticClass: 'q-tooltip q-tooltip--style q-position-engine no-pointer-events',
-          class: this.contentClass,
-          style: this.contentStyle,
-          attrs
-        }, slot(this, 'default')) : null
+          staticClass: 'q-tooltip__container column no-pointer-events'
+        }, [
+          h('div', {
+            staticClass: 'q-tooltip q-tooltip--style scroll',
+            class: this.contentClass,
+            style: this.contentStyle,
+            attrs
+          }, slot(this, 'default'))
+        ]) : null
       ])
     }
   },
@@ -241,5 +250,9 @@ export default Vue.extend({
 
   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 539bab5687cf..e8a46937d986 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 7b55c375afba..4987ea78f9eb 100644
--- a/ui/src/components/tooltip/QTooltip.sass
+++ b/ui/src/components/tooltip/QTooltip.sass
@@ -1,17 +1,19 @@
-.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
   padding: $tooltip-padding
+  opacity: 0
+
+  &__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
diff --git a/ui/src/components/tooltip/QTooltip.styl b/ui/src/components/tooltip/QTooltip.styl
index 7b55c375afba..4987ea78f9eb 100644
--- a/ui/src/components/tooltip/QTooltip.styl
+++ b/ui/src/components/tooltip/QTooltip.styl
@@ -1,17 +1,19 @@
-.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
   padding: $tooltip-padding
+  opacity: 0
+
+  &__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
diff --git a/ui/src/css/core/helpers.sass b/ui/src/css/core/helpers.sass
index 93630a1915fe..e9de8b798e74 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 93630a1915fe..e9de8b798e74 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 72ddfc32889f..34ec844ceaf9 100644
--- a/ui/src/css/core/positioning.sass
+++ b/ui/src/css/core/positioning.sass
@@ -97,10 +97,3 @@ body.q-ios-padding .fullscreen
   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 72ddfc32889f..34ec844ceaf9 100644
--- a/ui/src/css/core/positioning.styl
+++ b/ui/src/css/core/positioning.styl
@@ -97,10 +97,3 @@ body.q-ios-padding .fullscreen
   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/directives/TouchPan.js b/ui/src/directives/TouchPan.js
index 8440c321d8b6..55efe6219d13 100644
--- a/ui/src/directives/TouchPan.js
+++ b/ui/src/directives/TouchPan.js
@@ -213,8 +213,6 @@ export default {
         client.is.firefox === true && preventDraggable(el, true)
         ctx.lastEvt = evt
 
-        const pos = position(evt)
-
         /*
          * Stop propagation so possible upper v-touch-pan don't catch this as well;
          * If we're not the target (based on modifiers), we'll re-emit the event later
@@ -235,10 +233,13 @@ export default {
             evt.defaultPrevented === true && prevent(clone)
             evt.cancelBubble === true && stop(clone)
 
-            clone.qClonedBy = evt.qClonedBy === void 0
-              ? [ctx.uid]
-              : evt.qClonedBy.concat(ctx.uid)
-            clone.qClickOutside = evt.qClickOutside
+            Object.assign(clone, {
+              qClickOutside: evt.qClickOutside,
+              qAnchorHandled: evt.qAnchorHandled,
+              qClonedBy: evt.qClonedBy === void 0
+                ? [ ctx.uid ]
+                : evt.qClonedBy.concat(ctx.uid)
+            })
 
             ctx.initialEvent = {
               target: evt.target,
@@ -249,16 +250,18 @@ export default {
           stop(evt)
         }
 
+        const { left, top } = position(evt)
+
         ctx.event = {
-          x: pos.left,
-          y: pos.top,
+          x: left,
+          y: top,
           time: Date.now(),
           mouse: mouseEvent === true,
           detected: false,
           isFirst: true,
           isFinal: false,
-          lastX: pos.left,
-          lastY: pos.top
+          lastX: left,
+          lastY: top
         }
       },
 
diff --git a/ui/src/mixins/anchor.js b/ui/src/mixins/anchor.js
index f1f0bbc27a5b..2c529643f375 100644
--- a/ui/src/mixins/anchor.js
+++ b/ui/src/mixins/anchor.js
@@ -1,8 +1,22 @@
 import { clearSelection } from '../utils/private/selection.js'
-import { addEvt, cleanEvt, prevent, listenOpts } from '../utils/event.js'
+import { addEvt, cleanEvt, prevent, listenOpts, eventOnAncestors } from '../utils/event.js'
 import { getElement } from '../utils/dom.js'
 import { isKeyCode } from '../utils/private/key-composition.js'
 
+const scrollListenerHandlers = []
+
+function scrollEventDispatcher (e) {
+  scrollListenerHandlers
+    .slice()
+    .forEach(fn => {
+      if (e && e.target && e.target.qScrollPrevented === true) {
+        return
+      }
+
+      eventOnAncestors(e, fn.scrollTarget) === true && fn(e)
+    })
+}
+
 export default {
   props: {
     target: {
@@ -54,10 +68,14 @@ export default {
 
     __contextClick (evt) {
       this.hide(evt)
+      prevent(evt)
       this.$nextTick(() => {
         this.show(evt)
+
+        if (evt === Object(evt)) {
+          evt.qAnchorHandled = true
+        }
       })
-      prevent(evt)
     },
 
     __toggleKey (evt) {
@@ -73,7 +91,7 @@ export default {
       }
     },
 
-    __mobilePrevent: prevent,
+    prevent,
 
     __mobileTouch (evt) {
       this.__mobileCleanup(evt)
@@ -90,11 +108,15 @@ export default {
         [ target, 'touchmove', '__mobileCleanup', 'passive' ],
         [ target, 'touchend', '__mobileCleanup', 'passive' ],
         [ target, 'touchcancel', '__mobileCleanup', 'passive' ],
-        [ this.anchorEl, 'contextmenu', '__mobilePrevent', 'notPassive' ]
+        [ this.anchorEl, 'contextmenu', 'prevent', 'notPassive' ]
       ])
 
       this.touchTimer = setTimeout(() => {
         this.show(evt)
+
+        if (evt === Object(evt)) {
+          evt.qAnchorHandled = true
+        }
       }, 300)
     },
 
@@ -115,7 +137,7 @@ export default {
         }
         else {
           evts = [
-            [ this.anchorEl, 'click', 'hide', 'passive' ],
+            [ this.anchorEl, 'mousedown', 'hide', 'passive' ],
             [ this.anchorEl, 'contextmenu', '__contextClick', 'notPassive' ]
           ]
         }
@@ -157,17 +179,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)
+      }
     }
   },
 
@@ -177,10 +214,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/model-toggle.js b/ui/src/mixins/model-toggle.js
index 7c7002544a17..ac88c32336b3 100644
--- a/ui/src/mixins/model-toggle.js
+++ b/ui/src/mixins/model-toggle.js
@@ -2,6 +2,29 @@ import { isSSR } from '../plugins/Platform.js'
 
 import ListenersMixin from './listeners.js'
 
+const labelClick = { timeStamp: null, label: null, show: null }
+
+function isDuplicateLabelClick (evt, fromShow) {
+  if (evt.type !== 'click') {
+    return false
+  }
+
+  const { timeStamp, label, show } = labelClick
+  const { target } = evt
+
+  labelClick.show = fromShow
+  labelClick.timeStamp = evt.timeStamp
+  labelClick.label = target
+    ? (
+      typeof target.id === 'string' && target.id !== '' && label !== null && label.htmlFor === target.id
+        ? label
+        : typeof target.closest === 'function' ? target.closest('label') : null
+    )
+    : null
+
+  return timeStamp === labelClick.timeStamp && label === labelClick.label && show !== fromShow
+}
+
 export default {
   mixins: [ ListenersMixin ],
 
@@ -31,11 +54,19 @@ export default {
   methods: {
     toggle (evt) {
       this[this.showing === true ? 'hide' : 'show'](evt)
+
+      if (evt === Object(evt)) {
+        evt.qAnchorHandled = true
+      }
     },
 
     show (evt) {
       if (
         this.disable === true ||
+        (
+          evt === Object(evt) &&
+          (evt.qAnchorHandled === true || isDuplicateLabelClick(evt, 'show') === true)
+        ) ||
         (this.__showCondition !== void 0 && this.__showCondition(evt) !== true)
       ) {
         return
@@ -78,7 +109,13 @@ export default {
     },
 
     hide (evt) {
-      if (this.disable === true) {
+      if (
+        this.disable === true ||
+        (
+          evt === Object(evt) &&
+          (evt.qAnchorHandled === true || isDuplicateLabelClick(evt, 'hide') === true)
+        )
+      ) {
         return
       }
 
diff --git a/ui/src/utils/event.js b/ui/src/utils/event.js
index 6124aec91ddc..6b6cc2a28685 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,
@@ -174,6 +187,7 @@ export default {
   rightClick,
   position,
   getEventPath,
+  eventOnAncestors,
   getMouseWheelDistance,
   stop,
   prevent,
diff --git a/ui/src/utils/private/position-engine.js b/ui/src/utils/private/position-engine.js
index 5235b8b04c6e..b7334e097103 100644
--- a/ui/src/utils/private/position-engine.js
+++ b/ui/src/utils/private/position-engine.js
@@ -1,7 +1,59 @@
-import { getScrollbarWidth } from '../scroll.js'
+import { rtlHasScrollBug } from '../scroll.js'
 import { client } from '../../plugins/Platform.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 rtlHasScrollBug
+  const vpLeft = (rtlHasScrollBug() === 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 +72,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 +80,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 {
@@ -48,234 +88,303 @@ export function parsePosition (pos, rtl) {
   }
 }
 
-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 rtlHasScrollBug
+  if (rtlCorrection === true) {
+    const diff = document.documentElement.scrollWidth - document.documentElement.clientWidth
+    left -= diff
+    right -= diff
   }
 
   return {
-    top, bottom, height,
-    left, right, width,
+    left,
     middle: left + (right - left) / 2,
-    center: top + (bottom - top) / 2
-  }
-}
+    right,
 
-function getAbsoluteAnchorProps (el, absoluteOffset, offset) {
-  let { top, left } = el.getBoundingClientRect()
+    top,
+    center: top + (bottom - top) / 2,
+    bottom,
 
-  top += absoluteOffset.top
-  left += absoluteOffset.left
+    leftRev: right,
+    middleRev: left + (right - left) / 2,
+    rightRev: left,
 
-  if (offset !== void 0) {
-    top += offset[ 1 ]
-    left += offset[ 0 ]
-  }
+    topRev: bottom,
+    centerRev: top + (bottom - top) / 2,
+    bottomRev: top,
 
-  return {
-    top, bottom: top + 1, height: 1,
-    left, right: left + 1, width: 1,
-    middle: left,
-    center: top
+    width,
+    height
   }
 }
 
 export function getTargetProps (el) {
-  return {
-    top: 0,
-    center: el.offsetHeight / 2,
-    bottom: el.offsetHeight,
-    left: 0,
-    middle: el.offsetWidth / 2,
-    right: el.offsetWidth
+  let { width, height } = el.getBoundingClientRect()
+
+  if (width === 0) {
+    width = el.offsetWidth
+  }
+  if (height === 0) {
+    height = el.offsetHeight
   }
-}
 
-function getTopLeftProps (anchorProps, targetProps, cfg) {
   return {
-    top: anchorProps[ cfg.anchorOrigin.vertical ] - targetProps[ cfg.selfOrigin.vertical ],
-    left: anchorProps[ cfg.anchorOrigin.horizontal ] - targetProps[ cfg.selfOrigin.horizontal ]
+    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
+  const extEl = cfg.el
 
-    if (left !== vpLeft) {
-      el.setProperty('--q-pe-left', left + 'px')
-      vpLeft = left
-    }
-    if (top !== vpTop) {
-      el.setProperty('--q-pe-top', top + 'px')
-      vpTop = top
-    }
+  if (extEl.classList.contains('q-body--scroll-locked') === true) {
+    return
   }
 
-  // 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
+  let anchorProps, targetProps
 
-  const anchorProps = cfg.absoluteOffset === void 0
-    ? getAnchorProps(cfg.anchorEl, cfg.cover === true ? [ 0, 0 ] : cfg.offset)
-    : getAbsoluteAnchorProps(cfg.anchorEl, cfg.absoluteOffset, cfg.offset)
+  const
+    { documentElement, body, qScrollPrevented } = document,
+    intEl = extEl.children[0],
+    firstRender = intEl.style.opacity !== '1',
+    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: qScrollPrevented === true ? documentElement.scrollTop : 0 },
+    { vpLeft, apLeft } = computeScrollLeft(fixedPositioned, viewport, cfg.rtl),
+    vpTop = fixedPositioned === true
+      ? viewport.offsetTop
+      : (window.pageYOffset || window.scrollY || body.scrollTop || 0),
+    vpWidthProp = qScrollPrevented === true
+      ? 'offsetWidth'
+      : (fixedPositioned === true || isDocumentScrollableX() !== true ? 'clientWidth' : 'scrollWidth'),
+    vpHeightProp = qScrollPrevented === true
+      ? 'offsetHeight'
+      : (fixedPositioned === true || isDocumentScrollableY() !== true ? 'clientHeight' : 'scrollHeight'),
+    vpWidth = documentElement[vpWidthProp],
+    vpHeight = documentElement[vpHeightProp]
+
+  if (cfg.absoluteOffset === void 0) {
+    anchorProps = getAnchorProps(cfg.anchorEl, cfg.cover === true ? [0, 0] : cfg.offset, cfg.rtl === true && fixedPositioned !== true)
+  }
+  else {
+    const
+      leftOffset = cfg.rtl === true && fixedPositioned !== true
+        ? documentElement.scrollWidth - documentElement.clientWidth
+        : 0,
+      { top: anchorTop, left: anchorLeft } = cfg.anchorEl.getBoundingClientRect(),
+      offset = Array.isArray(cfg.offset) === true && cfg.cover !== true
+        ? [cfg.fit !== true ? cfg.offset[0] || 0 : 0, cfg.offset[1] || 0]
+        : [0, 0],
+      top = anchorTop + (cfg.cover === true ? 0 : cfg.absoluteOffset.top),
+      left = anchorLeft + (cfg.cover === true || cfg.fit === true ? 0 : cfg.absoluteOffset.left) - leftOffset
+
+    anchorProps = {
+      left: left - offset[0],
+      middle: left,
+      right: left + offset[0],
+
+      top: top - offset[1],
+      center: top,
+      bottom: top + offset[1],
+
+      leftRev: left + offset[0],
+      middleRev: left,
+      rightRev: left - offset[0],
+
+      topRev: top + offset[1],
+      centerRev: top,
+      bottomRev: top - offset[1],
+
+      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)
+  Object.assign(intEl.style, intElStyle)
 
-  const targetProps = getTargetProps(cfg.el)
-  let props = getTopLeftProps(anchorProps, targetProps, cfg)
-
-  if (cfg.absoluteOffset === void 0 || cfg.offset === void 0) {
-    applyBoundaries(props, anchorProps, targetProps, cfg.anchorOrigin, cfg.selfOrigin)
+  if (firstRender === true) {
+    const clone = intEl.cloneNode(true)
+    clone.classList.add('q-portal__clone')
+    body.appendChild(clone)
+    targetProps = getTargetProps(clone)
+    clone.remove()
+  }
+  else {
+    targetProps = getTargetProps(intEl)
   }
-  else { // we have touch position or context menu with offset
-    const { top, left } = props // cache initial values
-
-    // apply initial boundaries
-    applyBoundaries(props, anchorProps, targetProps, cfg.anchorOrigin, cfg.selfOrigin)
-
-    let hasChanged = false
 
-    // did it flip vertically?
-    if (props.top !== top) {
-      hasChanged = true
-      const offsetY = 2 * cfg.offset[ 1 ]
-      anchorProps.center = anchorProps.top -= offsetY
-      anchorProps.bottom -= offsetY + 2
-    }
+  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'
+  }
 
-    // did it flip horizontally?
-    if (props.left !== left) {
-      hasChanged = true
-      const offsetX = 2 * cfg.offset[ 0 ]
-      anchorProps.middle = anchorProps.left -= offsetX
-      anchorProps.right -= offsetX + 2
-    }
+  const extElStyle = {
+    position: fixedPositioned === true ? 'fixed' : 'absolute',
 
-    if (hasChanged === true) {
-      // re-calculate props with the new anchor
-      props = getTopLeftProps(anchorProps, targetProps, cfg)
+    left: null,
+    right: null,
+    marginLeft: null,
+    marginRight: null,
+    maxWidth: null,
 
-      // and re-apply boundaries
-      applyBoundaries(props, anchorProps, targetProps, cfg.anchorOrigin, cfg.selfOrigin)
-    }
+    top: null,
+    bottom: null,
+    marginTop: null,
+    marginBottom: null,
+    maxHeight: null
   }
 
-  elStyle = {
-    top: props.top + 'px',
-    left: props.left + 'px'
+  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'
   }
-
-  if (props.maxHeight !== void 0) {
-    elStyle.maxHeight = props.maxHeight + 'px'
-
-    if (anchorProps.height > props.maxHeight) {
-      elStyle.minHeight = elStyle.maxHeight
-    }
+  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
   }
-  if (props.maxWidth !== void 0) {
-    elStyle.maxWidth = props.maxWidth + 'px'
 
-    if (anchorProps.width > props.maxWidth) {
-      elStyle.minWidth = elStyle.maxWidth
-    }
+  // 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`
   }
 
-  Object.assign(cfg.el.style, elStyle)
+  // 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'
+  }
+  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
+  }
 
-  // restore scroll position
-  if (cfg.el.scrollTop !== scrollTop) {
-    cfg.el.scrollTop = scrollTop
+  // 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`
   }
-  if (cfg.el.scrollLeft !== scrollLeft) {
-    cfg.el.scrollLeft = scrollLeft
+  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`
   }
-}
 
-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)
-    }
+  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%'
   }
 
-  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)
-    }
+  Object.assign(extEl.style, extElStyle)
+  Object.assign(intEl.style, intElStyle)
+
+  if (firstRender === true) {
+    requestAnimationFrame(() => {
+      intEl.style.opacity = 1
+    })
   }
 }
diff --git a/ui/src/utils/scroll.js b/ui/src/utils/scroll.js
index 399f22786850..eae3d43764d8 100644
--- a/ui/src/utils/scroll.js
+++ b/ui/src/utils/scroll.js
@@ -47,7 +47,7 @@ export function getScrollTarget (el, targetEl) {
       return window
     }
 
-    target = el.closest('.scroll,.scroll-y,.overflow-auto')
+    target = el.closest('.scroll,.scroll-y,.overflow-auto,.q-dialog__inner > div')
   }
 
   return scrollTargets.includes(target)
diff --git a/ui/types/utils/event.d.ts b/ui/types/utils/event.d.ts
index 65096966a0db..1b8a92ba05bc 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;