шрифт искажается при изменении размера с помощью анимации

Question

Я изменяю размер div (включая sub divs и другие элементы), когда пользователь наводил на него курсор. Я заметил, что при этом шрифт искажается. Это не происходит на Mac, но на машинах Windows. Это код для парения анимации и 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

Эта проблема очень хорошо объясняется Золтан в this блоге Эта проблема возникает из-за CSS transfrom собственности из-за которой текст отображается с неровными краями, как показано на рисунке ниже.

(изображение взято из Золтан блога)

Этот эффект более заметен в Windows, и едва заметны в Mac.

Решение

Существуют различные решения этой проблемы, однако я предпочитаю, чтобы добавить prespective в transfrom недвижимость.

@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 и backface-visibility свойства

@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>

На втором растворе машины Linux работает отлично.

Я надеюсь, что решает вашу проблему.