improve positioner calculations (#259)

src/positioner/src/Positioner.js

@@ -124,28 +124,45 @@ export default class Positioner extends PureComponent {
     this.update()
   }
 
-  update = () => {
+  update = (prevHeight = 0, prevWidth = 0) => {
     if (!this.props.isShown || !this.targetRef || !this.positionerRef) return
 
     const targetRect = this.targetRef.getBoundingClientRect()
-    const positionerRect = this.positionerRef.getBoundingClientRect()
+    const hasEntered =
+      this.positionerRef.getAttribute('data-state') === 'entered'
+
     const viewportHeight =
       document.documentElement.clientHeight + window.scrollY
     const viewportWidth = document.documentElement.clientWidth + window.scrollX
 
-    // https://github.com/segmentio/evergreen/issues/255
-    // We need to ceil the width and height to prevent jitter when
-    // the window is zoomed (when `window.devicePixelRatio` is not an integer)
-    const dimensions = {
-      height: Math.ceil(positionerRect.height),
-      width: Math.ceil(positionerRect.width)
+    let height
+    let width
+    if (hasEntered) {
+      // Only when the animation is done should we opt-in to `getBoundingClientRect`
+      const positionerRect = this.positionerRef.getBoundingClientRect()
+
+      // https://github.com/segmentio/evergreen/issues/255
+      // We need to ceil the width and height to prevent jitter when
+      // the window is zoomed (when `window.devicePixelRatio` is not an integer)
+      height = Math.ceil(positionerRect.height)
+      width = Math.ceil(positionerRect.width)
+    } else {
+      // When the animation is in flight use `offsetWidth/Height` which
+      // does not calculate the `transform` property as part of its result.
+      // There is still change on jitter during the animation (although unoticable)
+      // When the browser is zoomed in — we fix this with `Math.max`.
+      height = Math.max(this.positionerRef.offsetHeight, prevHeight)
+      width = Math.max(this.positionerRef.offsetWidth, prevWidth)
     }
 
     const { rect, transformOrigin } = getPosition({
       position: this.props.position,
       targetRect,
       targetOffset: this.props.targetOffset,
-      dimensions,
+      dimensions: {
+        height,
+        width
+      },
       viewport: {
         width: viewportWidth,
         height: viewportHeight
@@ -161,7 +178,7 @@ export default class Positioner extends PureComponent {
       },
       () => {
         window.requestAnimationFrame(() => {
-          this.update()
+          this.update(height, width)
         })
       }
     )

src/positioner/src/getPosition.js

@@ -84,18 +84,22 @@ const getFitsOnTop = (rect, viewportOffset) => {
 }
 
 /**
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
  * Function that returns the CSS `tranform-origin` property.
  * @param {Rect} rect
  * @param {Position} position
+ * @param {Object} dimensions — the dimensions of the positioner.
  * @param {Number} targetCenter - center of the target.
  * @return {String} transform origin
  */
-const getTransformOrigin = ({ rect, position, targetCenter }) => {
+const getTransformOrigin = ({ rect, position, dimensions, targetCenter }) => {
   const center = Math.round(targetCenter - rect.left)
   if (isAlignedOnTop(position)) {
-    return `bottom ${center}px`
+    /* Syntax: x-offset | y-offset */
+    return `${center}px ${dimensions.height}px `
   }
-  return `top ${center}px`
+  /* Syntax: x-offset | y-offset */
+  return `${center}px 0px `
 }
 
 /**
@@ -143,6 +147,7 @@ export default function getFittedPosition({
   const transformOrigin = getTransformOrigin({
     rect,
     position: finalPosition,
+    dimensions,
     targetCenter
   })