Сглаживание текста при увеличении элемента

Question

Не получается решить проблему с замыленным текстом при увеличении элемента, нужно что бы блок увеличивался и не было скачков с замыленным текстом, возможно ли это?

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap');

.box {
  width: 300px;
  height: 100px;
  margin: 50px;
  position: relative;
  background: #151515;
  border-radius: 7px;
  transition: transform .3s ease;
}

.box:hover {
  transform: scale(1.025);
  cursor: pointer;
}

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 8px;
  background: #ffcb3e;
  border-radius: 7px;
  font-size: 24px;
  line-height: 24px;
  font-weight: 700;
  font-family: Noto Sans JP;
}

<div class="box">
  <span class="badge">Coming Soon</span>
</div>

Answer 1

Добавить will-change: transform; в .box?

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap');
.box {
  width: 300px;
  height: 100px;
  margin: 50px;
  position: relative;
  background: #151515;
  border-radius: 7px;
  transition: transform .3s ease;
  will-change: transform;
}

.box:hover {
  transform: scale(1.025);
  cursor: pointer;
}

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 8px;
  background: #ffcb3e;
  border-radius: 7px;
  font-size: 24px;
  line-height: 24px;
  font-weight: 700;
  font-family: Noto Sans JP;
}

<div class="box">
  <span class="badge">Coming Soon</span>
</div>

БЛОГ НА HUSL

Сглаживание текста при увеличении элемента

Ответы (1 шт):