feat(position-engine): Some tweaks to setPosition (quasarframework#6245)

Author: pdanpdan

ui/src/css/core/positioning.sass

@@ -96,4 +96,6 @@
 /* internal: */
 .q-position-engine
   margin-top: var(--q-pe-top, 0) !important
-  margin-left: var(--q-pe-left, 0) !important
+  margin-left: var(--q-pe-left, 0) !important
+  will-change: auto
+  visibility: collapse // needed for animation - is removed on first positioning

ui/src/css/core/positioning.styl

@@ -96,4 +96,6 @@
 /* internal: */
 .q-position-engine
   margin-top: var(--q-pe-top, 0) !important
-  margin-left: var(--q-pe-left, 0) !important
+  margin-left: var(--q-pe-left, 0) !important
+  will-change: auto
+  visibility: collapse // needed for animation - is removed on first positioning

ui/src/utils/position-engine.js

@@ -95,13 +95,10 @@ export function setPosition (cfg) {
   let anchorProps
 
   // scroll position might change
-  // if max-height changes, so we
+  // if max-height/-width changes, so we
   // need to restore it after we calculate
   // the new positioning
-  const scrollTop = cfg.el.scrollTop
-
-  cfg.el.style.maxHeight = cfg.maxHeight
-  cfg.el.style.maxWidth = cfg.maxWidth
+  const { scrollLeft, scrollTop } = cfg.el
 
   if (cfg.absoluteOffset === void 0) {
     anchorProps = getAnchorProps(cfg.anchorEl, cfg.cover === true ? [0, 0] : cfg.offset)
@@ -115,13 +112,21 @@ export function setPosition (cfg) {
     anchorProps = { top, left, width: 1, height: 1, right: left + 1, center: top, middle: left, bottom: top + 1 }
   }
 
+  let elStyle = {
+    maxHeight: cfg.maxHeight,
+    maxWidth: cfg.maxWidth,
+    visibility: 'visible'
+  }
+
   if (cfg.fit === true || cfg.cover === true) {
-    cfg.el.style.minWidth = anchorProps.width + 'px'
+    elStyle.minWidth = anchorProps.width + 'px'
     if (cfg.cover === true) {
-      cfg.el.style.minHeight = anchorProps.height + 'px'
+      elStyle.minHeight = anchorProps.height + 'px'
     }
   }
 
+  Object.assign(cfg.el.style, elStyle)
+
   const
     targetProps = getTargetProps(cfg.el),
     props = {
@@ -131,20 +136,27 @@ export function setPosition (cfg) {
 
   applyBoundaries(props, anchorProps, targetProps, cfg.anchorOrigin, cfg.selfOrigin)
 
-  cfg.el.style.top = Math.max(0, Math.floor(props.top)) + 'px'
-  cfg.el.style.left = Math.max(0, Math.floor(props.left)) + 'px'
+  elStyle = {
+    top: Math.max(0, Math.floor(props.top)) + 'px',
+    left: Math.max(0, Math.floor(props.left)) + 'px'
+  }
 
   if (props.maxHeight !== void 0) {
-    cfg.el.style.maxHeight = Math.floor(props.maxHeight) + 'px'
+    elStyle.maxHeight = Math.floor(props.maxHeight) + 'px'
   }
   if (props.maxWidth !== void 0) {
-    cfg.el.style.maxWidth = Math.floor(props.maxWidth) + 'px'
+    elStyle.maxWidth = Math.floor(props.maxWidth) + 'px'
   }
 
+  Object.assign(cfg.el.style, elStyle)
+
   // restore scroll position
   if (cfg.el.scrollTop !== scrollTop) {
     cfg.el.scrollTop = scrollTop
   }
+  if (cfg.el.scrollLeft !== scrollLeft) {
+    cfg.el.scrollLeft = scrollLeft
+  }
 }
 
 function applyBoundaries (props, anchorProps, targetProps, anchorOrigin, selfOrigin) {