是这样的
项目中使用的框架是Vue+ElementUI,然后有这样一个再平常不过的需求:
有一个弹出框
弹框中有checkbox
用户可以点击选中checkbox
看到这样的需求,三下五除二……搞定!然后就出现了一个奇怪的BUG,触发条件是这样的:
点开Dialog框
点击checkbox
bug出现了,会发现有一点轻微变化,那就是点击的一瞬间字体会变模糊(不管是选中还是取消选中状态)……
点击变模糊
为什么会这样
分析历程大概是这样:
最开始以为是弹出框出现了抖动,造成了文字的模糊,结果发现也不是这个原因。
后来以为是加了颜色造成的,后来想想肯定不可能。
不管什么原因肯定都是点击checkbox引起的,所以开始着手查询checkbox的原因。
然后,试了一下将checkbox的勾选框去掉,点击后发现没有文字模糊现象,可以确定是checkbox的原因了。
再然后,我还确认了一件事情,那就是会不会是鼠标点击的问题,假如我是用代码来选中checkbox是否还会有字体模糊现象呢?验证后发现不是点击的问题,只要checkbox被选中,那就会出现这样的问题,那么问题根源范围就缩小了。
最后通过控制台工