升级Angular12后TinyMCE v5.92在Firefox v91与Chrome v93表现差异求助

• 浏览器坐标计算API差异：Firefox和Chrome对getBoundingClientRect()的返回值处理存在细微区别，当触发元素（textarea）处于带滚动偏移的父容器内时，Firefox不会自动合并父容器的scrollTop/scrollLeft值到视口坐标中，而Chrome默认做了兼容处理。若自定义指令中计算TinyMCE弹出层top/left坐标时直接使用element.getBoundingClientRect().top，未额外计算当前可滚动父容器的偏移量，就会导致Firefox下坐标仅相对于顶层视口，弹出层飘到页面顶部。
• TinyMCE行内模式的定位配置缺失：未使用官方Angular集成包的场景下，若初始化TinyMCE时没有显式指定inline: true对应的定位锚点参数，Firefox对未显式指定锚点的绝对定位元素，会默认参考初始包含块而非最近的相对定位父级，和Chrome的定位上下文计算逻辑不一致。
• 自定义指令的变更检测时机问题：Angular 12升级后Zone.js对Firefox的事件触发时机处理有调整，若自定义指令内触发TinyMCE渲染的时机是在focus事件刚触发时立刻计算坐标，此时Firefox还未完成textarea的布局重绘，拿到的是旧坐标，而Chrome的重绘优先级更高，focus事件触发时布局已更新完成，拿到的坐标符合预期。

• 修正坐标计算逻辑，统一兼容滚动偏移
  将原有获取textarea坐标的逻辑替换为多浏览器兼容版本，参考代码如下：

// 自定义指令内获取目标元素的绝对坐标
const getElementAbsPos = (el: HTMLElement) => {
  let left = 0;
  let top = 0;
  while (el) {
    left += el.offsetLeft + el.clientLeft;
    top += el.offsetTop + el.clientTop;
    el = el.offsetParent as HTMLElement;
  }
  return { left, top };
}
// 计算弹出层位置时使用该方法返回值，不要直接调用getBoundingClientRect
const pos = getElementAbsPos(textareaElement);
tinyMCEEditor.getContainer().style.top = `${pos.top - 40}px`; // 40为编辑器自身高度，可根据实际场景调整

• 补全TinyMCE初始化定位配置
  在TinyMCE初始化参数中显式指定定位相关配置：

tinymce.init({
  // 保留原有其他配置
  inline: true,
  fixed_toolbar_container: 'body',
  toolbar_location: 'top',
  relative_urls: false,
  remove_script_host: false
})

• 调整渲染触发时机，等待布局稳定后再计算定位
  将原focus事件中直接渲染编辑器的逻辑，用延时逻辑包一层，等Firefox完成重绘后再计算坐标：

// 自定义指令的focus事件回调
@HostListener('focus')
onFocus() {
  setTimeout(() => {
    // 放入原有TinyMCE渲染、坐标计算逻辑
  }, 0);
}

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