解除 El Cascader 缩放时的烦人颤抖：一劳永逸的解决办法

最近在使用 Element Plus 开发时，我遇到了一个组件库尚未解决的 bug。层级选择器 El Cascader 在浏览器缩放到一定比例（不同电脑触发 bug 所需缩放的比例不同）时，整个页面会以 El Cascader 为中心剧烈抖动，严重影响用户体验。

经过一番深入调查，我发现罪魁祸首是 El Cascader 使用的 CSS transform 属性。当浏览器缩放时，transform 的计算方式会发生变化，导致 El Cascader 的定位出现偏移，从而引发抖动。

为了解决这一问题，我们可以采用以下方法：

使用 CSS 变量代替 transform

将 El Cascader 的 transform 属性替换为 CSS 变量，并使用 JavaScript 动态更新变量的值。这样，当浏览器缩放时，变量的值会随之变化，从而避免 transform 计算方式的改变导致的定位偏移。

:root {
  --el-cascader-scale: 1;
}

.el-cascader {
  transform: scale(var(--el-cascader-scale));
}

const elCascader = document.querySelector('.el-cascader');

window.addEventListener('resize', () => {
  const scale = window.innerWidth / document.documentElement.clientWidth;
  elCascader.style.setProperty('--el-cascader-scale', scale);
});

使用 Webkit 专属属性 -webkit-transform

另一个解决办法是使用 Webkit 专属属性 -webkit-transform。与 transform 不同，-webkit-transform 在浏览器缩放时不会重新计算，从而避免定位偏移。

.el-cascader {
  -webkit-transform: scale(1);
}

使用 Chrome 专属属性 will-change

对于 Chrome 浏览器，我们可以使用 will-change 属性来强制浏览器预先计算 El Cascader 的 transform 属性，从而避免缩放时的重新计算。

.el-cascader {
  will-change: transform;
}

以上三种方法都可以在不同程度上解决 El Cascader 缩放抖动的问题。开发者可以根据实际情况选择最适合自己的方案。

值得注意的是，这些方法并不能完全消除抖动，但可以显著减轻其影响，提升用户体验。希望本文能帮助你解决这一恼人的问题，让你的开发工作更加顺畅。