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會造成這樣的原因，還未清楚。