遇见诡异的问题/闪动/闪烁/抖动展示不全可以试试 transform: translateZ(0)； will-change: transform；
同一个组件大量的使用 el-tooltip是不是就有这个问题
这是一种前端开发里常用的“小技巧”或“Hack”，用来解决一些 浏览器渲染异常或性能问题。
我们可以更系统地解释一下这两行的作用和适用场景👇
一、transform: translateZ(0) 的作用
这一句会触发 GPU 加速渲染（硬件加速）。
浏览器在绘制元素时，通常使用 CPU 合成图层（compositing layer），但加上 translateZ(0) 后，会让该元素：
创建一个新的复合图层（compositing layer）；
使用 GPU 来渲染这一层；
有时能避免页面闪烁、抖动、卡顿、层级错乱等问题。
✅ 常见用途：
修复 Safari / Chrome 中元素闪烁、错位；
解决 fixed 元素在 transform 父元素中抖动；
提升动画流畅度（比如
transition或keyframes动画）；解决某些滚动或 z-index 堆叠问题。
⚠️ 但要注意：
滥用会导致 GPU 负担加重，反而可能降低性能；
不建议对大量节点使用（例如长列表或复杂 UI）。
二、will-change: transform 的作用
will-change 是 一种性能优化提示（performance hint），告诉浏览器：
“这个元素即将发生 transform 改变，请提前为它做优化准备。”
这样浏览器会提前创建独立的合成层，减少动画开始时的抖动或延迟。
✅ 常见用途：
在动画或滚动前预先声明变化属性；
优化过渡（例如 hover 放大、移动、淡入）；
提高首次动画的流畅度。
⚠️ 注意：
同样不要长期对大量元素使用；
用完可以移除（比如在动画结束后去掉）。
三、典型组合用法
.smooth-layer {transform: translateZ(0);will-change: transform;
}
这组常用于：
需要平滑滚动或淡入淡出的图片 / 卡片；
修复 Chrome 动画闪烁；
修复 Safari 下 position: fixed + transform 的错乱。
要不要我帮你列几个「典型 Bug 场景 + 这两行 CSS 的修复示例」？比如：
fixed 元素在 transform 父层中抖动；
图片 hover 缩放闪烁；
transition 动画掉帧。