* CSS変換中のテキストがぼやけています - Chrome

Question

こんにちは私はこれとしばらく戦ってきました。私はわずかに変形しようとしているボタン（内部にdiv w/textがある場合でも）がある。変換中に、テキストがぼやけて見えて、ポップの種類がフォーカスに戻ります。テキストを同じサイズのままにする方法はありますか？または、変換中にレンダリングしますか？

下記のようにrotate(0.02deg)を試しました。また、-webkit-transform: translateZ(0px)と-webkit-backface-visibility: hiddenを試してみてください。

.smooth-pop:hover { 
    -webkit-backface-visibility: hidden; 
    -webkit-transform:scale(1.1) rotate(0.02deg);  
    transform: scale(1.1) rotate(0.02deg);   
} 

以下のコードスニペットを見ると、何が起こっているのかがわかります。これには、この機能のための私のCSSもすべて含まれています。 IEではOKです。

.smooth-pop { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-radius: 4px; 
 
    -webkit-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
    /*-webkit-font-smoothing: antialiased;*/ 
 
} 
 
.smooth-pop::after { 
 
    box-shadow: 0 5px 15px rgba(0, 0, 0, .20); 
 
    content: ""; 
 
    border-radius: 4px; 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0; 
 
    -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 
 
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 
 
} 
 
.smooth-pop:hover { 
 
    -webkit-backface-visibility: hidden; 
 
    -webkit-transform: scale(1.1) rotate(0.02deg); 
 
    transform: scale(1.1) rotate(0.02deg); 
 
    /*-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .20);*/ 
 
} 
 
.smooth-pop:hover::after { 
 
    opacity: 1; 
 
}

<div class="smooth-pop" style="width:50px; height:50px; border:1px solid black"> 
 
    test 
 
</div>

Answer 1

これは、CSSプロパティを使用して変換によるものです。 これを使用すると、トランジションプロパティを使用する代わりに、幅と高さを変換することをお勧めします。