アニメーションでリサイズしたときにフォントが歪んだ

Question

ユーザーがその上に置かれたときにdivのサイズを変更しました（サブdivやその他の要素を含む）。私はそうするときにフォントがゆがんでいることに気づいた。これはMacでは発生しませんが、Windowsマシンでは発生します。これは、（私は関係ない部分をchoped）ホバーアニメーションとcoresponidng HTMLのコードです：

CSS: @import url(https://fonts.googleapis.com/css?family=Lato:400,700); 

    .content-no-btn { transition: all .2s ease-in-out; } 

    .content-no-btn:hover{ transform: scale(1.05); } 

HTML: 
    <div class="plan"> 
    <div class="plan-inner"> 
     <div class="content-no-btn"> 

      <div class="entry-title first-entry-title"> 
      <h3>H3 here </h3> 
      <div class="price">$23.99<span></span> 
      </div> 
      </div> 
     </div> 
     </div> 
     </div> 

問題がある可能性がありますか？

Answer 1

この問題は、Zoltanによって非常にうまく説明されていますthisブログ投稿 この問題はCSS transfromプロパティのために発生します。その理由は、下の画像に示すようにテキストがギザギザのエッジでレンダリングされるためです。

この効果は、Windowsでより多くの目に見えるとMacでほとんど目立たである（この画像はゾルタンのブログから取られています）。

この問題に対する様々な解決策があります

ソリューションは、しかし、私は、プロパティをtransfromするprespectiveを追加することを好みます。

@import url(https://fonts.googleapis.com/css?family=Lato:400,700); 
 

 
    .content-no-btn { transition: all .2s ease-in-out; } 
 

 
    .content-no-btn:hover{ 
 
     transform: perspective(1px) scale(1.1); 
 
     transform-origin: 0 0; 
 
    }

<div class="plan"> 
 
    <div class="plan-inner"> 
 
     <div class="content-no-btn"> 
 

 
      <div class="entry-title first-entry-title"> 
 
      <h3>H3 here </h3> 
 
      <div class="price">$23.99<span></span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     </div>

別の解決策は、SVG filterと私のLinuxマシン第二の溶液で

@import url(https://fonts.googleapis.com/css?family=Lato:400,700); 
 

 
    .content-no-btn { transition: all .2s ease-in-out; } 
 

 
    .content-no-btn:hover{ 
 
     transform: scale(1.1); 
 
     transform-origin: 0 0; 
 
     /*For chrome or other WebKit/Blink browsers.*/ 
 
     -webkit-backface-visibility: hidden; 
 

 
     /*For Firefox */ 
 
     filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0" /></filter></defs></svg>#gaussian_blur'); 
 

 
    }

<div class="plan"> 
 
    <div class="plan-inner"> 
 
     <div class="content-no-btn"> 
 

 
      <div class="entry-title first-entry-title"> 
 
      <h3>H3 here </h3> 
 
      <div class="price">$23.99<span></span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     </div>

が完璧に働いているbackface-visibilityプロパティを使用することです。

私はあなたの問題を解決することを願っています。