element-plus表格show-overflow-tooltip错位

152 阅读1分钟

开发中遇到一个问题,给el-table-column开启了show-overflow-tooltip后,莫名其妙地错位了。

如图:

最开始以为是z-index导致的,后面去掉相关的代码也没有变化。

后面发现,居然是设置了毛玻璃的css样式导致的。

这个el-table的容器,设置了

backdrop-filter: blur(8px);

去掉相关的代码就好了。

问了一下AI,应该是backdrop-filter: blur 会导致tooltip位置计算错位。

正常情况下的定位计算:

tooltip位置 = 触发元素位置 + viewport坐标

应用backdrop-blur后的定位计算

tooltip位置 = 触发元素位置 + backdrop-blur容器坐标 + 容器内偏移

还有下面这些属性有可能影响tooltip的定位

  transform: translateZ(0);        /* 任何3D变换 */  filter: blur(5px);              /* filter属性 */  opacity: 0.99;                  /* 非1的opacity */  position: fixed/sticky;         /* 某些定位属性 */  z-index: 1;                     /* 配合定位使用 */  contain: layout/paint;          /* CSS containment */  isolation: isolate;             /* 显式创建 */

我的解决方式是去掉了容器的blur,单独给另外的元素设置blur然后放在背景。

理论上 修改teleported让tooltip append 到body底下应该也可以修复,但我修改了配置好像没有生效。就没有用这种方案。