fix: use measurement clone to avoid disrupting popup animations during alignment

On some platforms (notably Linux with X11/Wayland compositors), the alignment
calculation runs mid-CSS-animation. The previous approach modified the popup
element's styles (left, top, transform, overflow) to measure its position,
which interfered with active CSS transitions (transition: all) and transforms
(transform: scale()) applied during entrance animations. This caused
getBoundingClientRect() to return incorrect values, producing wildly wrong
popup positions (e.g. top: -20000px).

The fix replaces the direct popup style manipulation with a shallow clone
(cloneNode(false)) used as a measurement proxy. The clone inherits the
popup's classes and attributes but has transform/transition explicitly
neutralized. This allows accurate position measurement without touching
the original popup element, fully preserving CSS animations on all platforms.

Changes:
- Replace placeholder + popup style reset with cloneNode(false) measurement
- Measure positions via the clone's getBoundingClientRect() instead of the
  popup's, avoiding interference from active animations
- Remove originLeft/Top/Right/Bottom/Overflow/Transform save/restore logic
  since the popup element is no longer modified during measurement

Author: AnthonyH16

src/hooks/useAlign.ts

@@ -177,35 +177,31 @@ export default function useAlign(
       const doc = popupElement.ownerDocument;
       const win = getWin(popupElement);
 
-      const { position: popupPosition } = win.getComputedStyle(popupElement);
-
-      const originLeft = popupElement.style.left;
-      const originTop = popupElement.style.top;
-      const originRight = popupElement.style.right;
-      const originBottom = popupElement.style.bottom;
-      const originOverflow = popupElement.style.overflow;
-
       // Placement
       const placementInfo: AlignType = {
         ...builtinPlacements[placement],
         ...popupAlign,
       };
 
-      // placeholder element
-      const placeholderElement = doc.createElement('div');
-      popupElement.parentElement?.appendChild(placeholderElement);
-      placeholderElement.style.left = `${popupElement.offsetLeft}px`;
-      placeholderElement.style.top = `${popupElement.offsetTop}px`;
-      placeholderElement.style.position = popupPosition;
-      placeholderElement.style.height = `${popupElement.offsetHeight}px`;
-      placeholderElement.style.width = `${popupElement.offsetWidth}px`;
-
-      // Reset first
-      popupElement.style.left = '0';
-      popupElement.style.top = '0';
-      popupElement.style.right = 'auto';
-      popupElement.style.bottom = 'auto';
-      popupElement.style.overflow = 'hidden';
+      // Use a temporary measurement element instead of modifying the popup
+      // directly. This avoids disrupting CSS animations (transform, transition)
+      // that may be active on the popup during entrance motion.
+      // On some platforms (notably Linux), the alignment calculation runs
+      // mid-animation. Modifying popup styles (left/top/transform) interferes
+      // with active CSS transitions (transition: all) and transforms
+      // (transform: scale()), causing getBoundingClientRect() to return
+      // incorrect values and producing wildly wrong popup positions.
+      const measureEl = popupElement.cloneNode(false) as HTMLElement;
+      measureEl.style.left = '0';
+      measureEl.style.top = '0';
+      measureEl.style.right = 'auto';
+      measureEl.style.bottom = 'auto';
+      measureEl.style.overflow = 'hidden';
+      measureEl.style.transform = 'none';
+      measureEl.style.transition = 'none';
+      measureEl.style.visibility = 'hidden';
+      measureEl.style.pointerEvents = 'none';
+      popupElement.parentElement?.appendChild(measureEl);
 
       // Calculate align style, we should consider `transform` case
       let targetRect: Rect;
@@ -227,7 +223,9 @@ export default function useAlign(
           height: rect.height,
         };
       }
-      const popupRect = popupElement.getBoundingClientRect();
+      // Measure from the temporary element (not affected by CSS transforms
+      // or transitions on the popup).
+      const popupRect = measureEl.getBoundingClientRect();
       const { height, width } = win.getComputedStyle(popupElement);
       popupRect.x = popupRect.x ?? popupRect.left;
       popupRect.y = popupRect.y ?? popupRect.top;
@@ -281,22 +279,16 @@ export default function useAlign(
         ? visibleRegionArea
         : visibleArea;
 
-      // Record right & bottom align data
-      popupElement.style.left = 'auto';
-      popupElement.style.top = 'auto';
-      popupElement.style.right = '0';
-      popupElement.style.bottom = '0';
-
-      const popupMirrorRect = popupElement.getBoundingClientRect();
+      // Record right & bottom align data using measurement element
+      measureEl.style.left = 'auto';
+      measureEl.style.top = 'auto';
+      measureEl.style.right = '0';
+      measureEl.style.bottom = '0';
 
-      // Reset back
-      popupElement.style.left = originLeft;
-      popupElement.style.top = originTop;
-      popupElement.style.right = originRight;
-      popupElement.style.bottom = originBottom;
-      popupElement.style.overflow = originOverflow;
+      const popupMirrorRect = measureEl.getBoundingClientRect();
 
-      popupElement.parentElement?.removeChild(placeholderElement);
+      // Clean up measurement element (popup styles were never modified)
+      popupElement.parentElement?.removeChild(measureEl);
 
       // Calculate scale
       const scaleX = toNum(

tests/align.test.tsx

@@ -333,4 +333,51 @@ describe('Trigger.Align', () => {
       }),
     );
   });
+
+  // https://github.com/react-component/trigger/issues/XXX
+  it('should not modify popup styles during alignment measurement', async () => {
+    // On some platforms (notably Linux), the alignment calculation runs
+    // mid-CSS-animation. The fix uses a temporary measurement element
+    // instead of modifying the popup's styles, so CSS animations
+    // (transform, transition) are never disrupted.
+
+    render(
+      <Trigger
+        popupVisible
+        popup={<span className="popup-content" />}
+        popupAlign={{
+          points: ['tl', 'bl'],
+        }}
+      >
+        <div className="trigger-target" />
+      </Trigger>,
+    );
+
+    await awaitFakeTimer();
+
+    const popupElement = document.querySelector(
+      '.rc-trigger-popup',
+    ) as HTMLElement;
+    expect(popupElement).toBeTruthy();
+
+    // Spy on popup style mutations during alignment
+    const styleChanges: string[] = [];
+    const origSetProperty = popupElement.style.setProperty.bind(popupElement.style);
+    popupElement.style.setProperty = function(prop: string, val: string, priority?: string) {
+      styleChanges.push(prop);
+      return origSetProperty(prop, val, priority || '');
+    };
+
+    // Trigger re-alignment
+    triggerResize(popupElement);
+    await awaitFakeTimer();
+
+    // The popup's left/top/transform/transition should not have been
+    // modified directly during measurement (only the final positioning
+    // values should be applied via the React state update, not during
+    // the measurement phase)
+    expect(styleChanges).not.toContain('transform');
+    expect(styleChanges).not.toContain('transition');
+    expect(styleChanges).not.toContain('overflow');
+  });
 });