是这样的
项目中使用的框架是Vue+ElementUI，然后有这样一个再平常不过的需求：
- 有一个弹出框
- 弹框中有checkbox
- 用户可以点击选中checkbox
看到这样的需求，三下五除二……搞定！然后就出现了一个奇怪的BUG，触发条件是这样的：
- 点开Dialog框
- 点击checkbox
- bug出现了，会发现有一点轻微变化，那就是点击的一瞬间字体会变模糊（不管是选中还是取消选中状态）……
点击变模糊
为什么会这样
分析历程大概是这样：
- 最开始以为是弹出框出现了抖动，造成了文字的模糊，结果发现也不是这个原因。
- 后来以为是加了颜色造成的，后来想想肯定不可能。
- 不管什么原因肯定都是点击checkbox引起的，所以开始着手查询checkbox的原因。
- 然后，试了一下将checkbox的勾选框去掉，点击后发现没有文字模糊现象，可以确定是checkbox的原因了。
- 再然后，我还确认了一件事情，那就是会不会是鼠标点击的问题，假如我是用代码来选中checkbox是否还会有字体模糊现象呢？验证后发现不是点击的问题，只要checkbox被选中，那就会出现这样的问题，那么问题根源范围就缩小了。
- 最后通过控制台工具排查发现，checkbox选框使用了下边代码
.el-checkbox__inner::after {
/* ...其他样式代码... */
/*
这里是关键代码
就是由于这里的transform造成的，其实很多自己模糊或者闪动的问题都是由于tansfrom造成的
*/
transform: rotate(45deg) scaleY(0);
/* ...其他样式代码... */
}
/* 选中后的样式是这样的 */
.el-checkbox__input.is-checked .el-checkbox__inner::after {
transform: rotate(45deg) scaleY(1); /*这里将scaleY变为了1，造成了闪动*/
}
- 那么既然问题找到了，解决就好办了，在代码中深度修改css样式即可
.dialogClass >>> .el-checkbox .el-checkbox__inner::after {
transform: rotate(45deg) scaleY(1)!important;
/*
这里直接将其选中和未选中状态都设置为1就行，
这里其实还有一个隐藏的前置条件，
那就是背景色为白色，而且选中的时候的√的border颜色也是白色
那这样，就算是scaleY(1)也是看不出来的，就能达到效果
*/
}
-
结果
正常了
总结
该bug是由于css的transform引起的，找到了问题所在样式，对其进行了修改，解决了当前bug。但是具体为什么transform会造成这样的原因，还未清楚。
