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

是这样的 项目中使用的框架是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会造成这样的原因，还未清楚。

本文章由javascript技术分享原创和收集