Как убрать размытость шрифтов и эффект «блокировки» при комбинировании transform: scale с transition: transform? - PullRequest
Новая
       31

Как убрать размытость шрифтов и эффект «блокировки» при комбинировании transform: scale с transition: transform?

1 голос
/ 10 июля 2019

При объединении transform: scale с transition: scale у анимации есть две проблемы, и проблемы аналогичны в Firefox и Chrome.

1) Шрифт / граница очень размытые во время перехода 2) О программеЧерез 0,3 с после перехода браузер «фиксирует» новый масштаб.Это сложно объяснить, но вы ясно увидите из примера. 

<html>
<body>
  <div id="block">
    <div class="text">123123</div> 
    <div class="text">123123</div> 
    <div class="text">123123</div> 
  </div>
</body>
</html>

<style>
#block {
   margin-top: 100px;
   margin-left: 100px;
   width: 80%;
   height: 300px;
   display: flex;
   flex-direction: column;
}
.text {
   margin: auto;
   width: 250px;    
   font-size: 25px;
   transition: transform 0.5s;
   border: 1px solid blue;
   cursor: pointer;
}
.text:hover {
    transform: scale(1.5);
}
</style>

Я пытался добавить backface-visibility: скрытый, но это не имеет никакого эффекта в Firefox и делает окончание перехода постоянно размытым.

Также пробовал использовать transform-origin: 100% 0, но безрезультатно.

Взгляните на Codepen:

https://codepen.io/vibonaaci/pen/LKqrPX

Любойидеи?Если вы используете эффект для более стилизованных элементов, проблема действительно ранит глаза.

...