elementUI dialog组件中的checkbox组件点击时，字体模糊的问题

是这样的

项目中使用的框架是Vue+ElementUI，然后有这样一个再平常不过的需求：

• 有一个弹出框
• 弹框中有checkbox
• 用户可以点击选中checkbox

看到这样的需求，三下五除二……搞定！然后就出现了一个奇怪的BUG，触发条件是这样的：

1. 点开Dialog框
2. 点击checkbox
3. bug出现了，会发现有一点轻微变化，那就是点击的一瞬间字体会变模糊（不管是选中还是取消选中状态）……

为什么会这样

分析历程大概是这样：

1. 最开始以为是弹出框出现了抖动，造成了文字的模糊，结果发现也不是这个原因。
2. 后来以为是加了颜色造成的，后来想想肯定不可能。
3. 不管什么原因肯定都是点击checkbox引起的，所以开始着手查询checkbox的原因。
4. 然后，试了一下将checkbox的勾选框去掉，点击后发现没有文字模糊现象，可以确定是checkbox的原因了。
5. 再然后，我还确认了一件事情，那就是会不会是鼠标点击的问题，假如我是用代码来选中checkbox是否还会有字体模糊现象呢？验证后发现不是点击的问题，只要checkbox被选中，那就会出现这样的问题，那么问题根源范围就缩小了。
6. 最后通过控制台工具排查发现，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，造成了闪动*/
}

7. 那么既然问题找到了，解决就好办了，在代码中深度修改css样式即可

.dialogClass >>> .el-checkbox .el-checkbox__inner::after {
  transform: rotate(45deg) scaleY(1)!important;  
  /*
    这里直接将其选中和未选中状态都设置为1就行，
    这里其实还有一个隐藏的前置条件，
    那就是背景色为白色，而且选中的时候的√的border颜色也是白色
    那这样，就算是scaleY(1)也是看不出来的，就能达到效果
  */
  }

8. 结果

   
   

总结

该bug是由于css的transform引起的，找到了问题所在样式，对其进行了修改，解决了当前bug。但是具体为什么transform会造成这样的原因，还未清楚。