开发中遇到一个问题,给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底下应该也可以修复,但我修改了配置好像没有生效。就没有用这种方案。