perf(ot-dropdown): eliminate layout thrashing in popover positioning

src/css/dropdown.css

@@ -3,29 +3,25 @@
     [popover] {
       position: fixed;
       margin: 0;
-      /* padding: var(--space-1); */
-      min-width: 12rem;
       background-color: var(--background);
       border: 1px solid var(--border);
       border-radius: var(--radius-medium);
       box-shadow: var(--shadow-medium);
       opacity: 0;
-      transform: translateY(-4px);
+      will-change: transform, opacity;
+      min-width: 12rem;
       transition:
         opacity 150ms ease-out,
-        transform 150ms ease-out,
         display 150ms allow-discrete,
         overlay 150ms allow-discrete;
 
       &:popover-open {
         opacity: 1;
-        transform: translateY(0);
       }
 
       @starting-style {
         &:popover-open {
           opacity: 0;
-          transform: translateY(-4px);
         }
       }
     }

src/js/dropdown.js

@@ -32,12 +32,22 @@ class OtDropdown extends OtBase {
     this.#position = () => {
       // Position has to be calculated and applied manually because
       // popover positioning is like fixed, relative to the window.
-      const r = this.#trigger.getBoundingClientRect();
-      const m = this.#menu.getBoundingClientRect();
+      requestAnimationFrame(() => {
+        const r = this.#trigger.getBoundingClientRect();
+        const m = this.#menu.getBoundingClientRect();
 
-      // Flip if menu overflows viewport.
-      this.#menu.style.top = `${r.bottom + m.height > window.innerHeight ? r.top - m.height : r.bottom}px`;
-      this.#menu.style.left = `${r.left + m.width > window.innerWidth ? r.right - m.width : r.left}px`;
+        const top =
+          r.bottom + m.height > window.innerHeight
+            ? r.top - m.height
+            : r.bottom;
+
+        const left =
+          r.left + m.width > window.innerWidth
+            ? r.right - m.width
+            : r.left;
+
+        this.#menu.style.transform = `translate(${left}px, ${top}px)`;
+      });
     };
   }