Webデザイン/ CSS：かすみテキストジッタホバー

Question

の「アンぼやけ」であるとき、このjsfiddleをご覧ください：https://jsfiddle.net/heLwx9bz/

私が移行して、「非ぼかし」にホバー上のいくつかのテキストをしようとしています。 blur(0px)に移行すると、テキストがちょっとジッターして、ジャンプして約1pxだけ残っていることに注目してください。それはなぜですか、どうすれば避けることができますか？ジッタは、プロパティの変更にトランジションが追加された場合にのみ発生します。これは、Google Chromeの問題です

p { 
 
    font-size: 200px; 
 
} 
 

 
.blur { 
 
    filter: blur(2.5px); 
 
    transition: 0.7s -webkit-filter; 
 
} 
 

 
.blur:hover { 
 
    filter: blur(0px); 
 
}

<div> 
 
    <p class="blur"> 
 
    TEST 
 
    </p> 
 
</div>

Answer 1

：

は、ここに私のテストケースのコード、非常に簡単です。

特定のCSS遷移がハードウェアアクセラレーションされます。これはつまり、 はコンピュータのグラフィックスカードを使用して トランジションを適用するということです。また、グラフィックカードは グラフィック効果に最適化されているため、トランジションがはるかにスムーズになります。

トランジションは常にハードウェアアクセラレーションを使用するとは限りませんが、特定のCSSルールを適用すると を有効にすると強制的に有効になります。 ハードウェアアクセラレーションを有効にするcssプロパティの1つに、変換ルールである があります。だからCSS変換を適用し、グラフィックカード すべての作業を行います。

コードに-webkit-transform: translateZ(0);を追加するだけで修正されます。

p { 
 
    font-size: 200px; 
 
} 
 

 
.blur { 
 
    filter: blur(2.5px); 
 
    transition: 0.7s -webkit-filter; 
 
    -webkit-transform: translateZ(0); 
 
} 
 

 
.blur:hover { 
 
    filter: blur(0px); 
 
}

<div> 
 
    <p class="blur"> 
 
    TEST 
 
    </p> 
 
</div>

Answer 2

-webkit-transform: translateZ(0);と解決策は、あなたがfilter: blur(.2px)にぼやけていないバージョンを設定してみてくださいするために動作しない場合。

p { 
 
    font-size: 200px; 
 
} 
 

 
.blur { 
 
    filter: blur(2.5px); 
 
    transition: 0.7s -webkit-filter; 
 
} 
 

 
.blur:hover { 
 
    filter: blur(0.2px); 
 
}

<div> 
 
    <p class="blur"> 
 
    TEST 
 
    </p> 
 
</div>