Popper在缩放iframe中定位tooltip问题咨询

是否为已知限制？ #

这是Popper v2的已知限制。Popper v2的核心位置计算逻辑（即你定位到的getBoundingClientRect.ts文件相关代码）未处理iframe被CSS transform: scale()缩放后的坐标转换，导致tooltip在X/Y轴上出现定位偏移。

解决办法 #

方法1：自定义修正坐标（适配Popper v2） #

通过自定义Popper modifier，在位置计算完成后，基于iframe的缩放比例反向修正popper的坐标：

// 替换为你的iframe实际缩放值
const iframeScale = 0.8;
const popperInstance = createPopper(referenceElement, popperElement, {
  modifiers: [
    {
      name: 'adjustForIframeScale',
      phase: 'afterWrite',
      fn: ({ state }) => {
        // 基于缩放比例修正定位坐标
        state.styles.popper.left = `${state.rects.popper.x / iframeScale}px`;
        state.styles.popper.top = `${state.rects.popper.y / iframeScale}px`;
        // 清除默认transform，避免缩放叠加影响
        state.styles.popper.transform = 'translate(0, 0)';
      },
    },
  ],
});

方法2：升级到Floating UI（原Popper v3） #

Floating UI（Popper.js的后续迭代项目）已在新版本中修复了iframe缩放场景的定位问题，直接升级依赖至最新版Floating UI即可解决该问题，无需额外自定义逻辑。

内容的提问来源于stack exchange，提问作者endosama