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,造成了闪动*/
}
  1. 那么既然问题找到了,解决就好办了,在代码中深度修改css样式即可
.dialogClass >>> .el-checkbox .el-checkbox__inner::after {
  transform: rotate(45deg) scaleY(1)!important;  
  /*
    这里直接将其选中和未选中状态都设置为1就行,
    这里其实还有一个隐藏的前置条件,
    那就是背景色为白色,而且选中的时候的√的border颜色也是白色
    那这样,就算是scaleY(1)也是看不出来的,就能达到效果
  */
  }
  1. 结果


    正常了

总结

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

你可能感兴趣的:(elementUI dialog组件中的checkbox组件点击时,字体模糊的问题)