Firefox浏览器下Ckeditor Balloon Toolbar显示位置异常问题问询

该兼容性问题由Chrome、Firefox两款浏览器的滚动偏移计算逻辑差异、CKEditor旧版本兼容缺失共同导致，具体触发原因如下：

• 滚动偏移值读取逻辑差异：Firefox调用getBoundingClientRect()获取元素坐标时，不会自动合并最近滚动父容器的滚动偏移量，若编辑器处于局部滚动容器、固定定位容器内，计算出的工具栏定位坐标会额外叠加滚动距离，导致工具栏跟随页面下移、选中文本后位置错位。
• 滚动事件监听范围缺陷：CKEditor 5 v35.4.0之前的版本，Balloon Toolbar插件默认仅监听全局window的滚动事件，局部容器滚动时Firefox不会触发工具栏位置重新计算，Chrome则会自动感知局部滚动触发更新，进而出现两款浏览器表现不一致的问题。
• 平滑滚动兼容问题：如果页面全局开启了scroll-behavior: smooth属性，Firefox会在滚动动画执行过程中就触发工具栏位置计算，拿到的是未稳定的中间偏移值，Chrome则会等待滚动帧结束后再执行计算，也会触发该错位问题。

修复方案 #

• 优先升级CKEditor到v35.4.0及以上稳定版本，官方已在该版本中修复了Firefox下Balloon Toolbar的滚动偏移兼容问题。
• 若无法升级版本，可手动调整编辑器配置，传入实时滚动偏移量修正坐标计算逻辑，示例代码如下：

const scrollContainer = document.querySelector('.your-scroll-container')
ClassicEditor.create(document.querySelector('#editor'), {
  balloonToolbar: ['bold', 'italic', 'link', 'bulletedList'],
  ui: {
    // 手动传入滚动容器的偏移值修正定位
    viewportOffset: {
      top: scrollContainer.scrollTop,
      left: scrollContainer.scrollLeft
    }
  }
})

• 临时规避方案可监听滚动容器的scroll事件，滚动过程中主动隐藏工具栏，下次选中文本时会重新计算正确位置：

scrollContainer.addEventListener('scroll', () => {
  editor.ui.view.balloonToolbar.hide()
})

异常情况截图 #

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