el-cascader 缩放时会抖动/颤抖的解决办法

最近在使用element-plus开发的时候，遇到一个组件库还未解决的bug。就是层级选择器el-cascader在浏览器缩放到某一个比例（不同的电脑触发bug所需缩放的比例不同）的时候，整个页面会以1px的范围上下抖动。这个bug在官网的例子中也可以重现。

官方还暂未修复

截止到element-plus 1.3.0-beta.3版本，这个bug还是存在，github上有一个相关的issue，但是并不活跃。

暂时的解决办法

这是我个人能找到的比较好的解决办法，如果有什么想法欢迎一起讨论~

解决办法

.el-cascader .el-input__suffix {
    z-index:100;
}
.el-cascader .el-cascader__tags {
    right: 1px;
    top: 1px;
    transform: unset;
    width:80%;
}

要注意的是，这只是暂时的解决办法之一，我看也有直接去重写el-cascader组件的办法，但我并没有去尝试。不过最好还是等官方去修复这个bug，我在github上提了一个issue，希望有遇到同样情况的人可以关注一下~

解决过程

花了好几个小时，找了很多的办法，最终根据@chenxiyue提供的方法，只需要修改一点CSS样式，就可以避免这个问题。

.el-cascader .el-cascader__tags {
    right: 1px;
    top: 1px;
    transform: unset;
}

这个办法引起的其他问题

第一，这样会导致标签部分覆盖在图标之上，导致无法清空（在设置了clearable属性之后） ，如下图：

原因就是这个标签所在的div遮挡了这个图标：

我们可以通过修改这个图标的CSS样式（z-index）来将它移到上层：

.el-cascader .el-input__suffix {
    z-index:100;
}

第二，当标签（tag）过长是，会超出输入框的右侧边框：

所以再使用CSS限制一下宽度：

.el-cascader .el-cascader__tags {
    //...
    width:80%;
}

最终解决方案请看上面~