Почему текст становится размытым и колеблется во время 2-мерного преобразования масштаба

Я хочу, чтобы эта карта масштабировалась при наведении (включая элементы внутри нее), но текст колеблется/дрожит во время преобразования (при наведении на карту) и становится размытым во время и после масштабирования (иногда с некоторыми коэффициентами больше, чем с другими). что, я думаю, связано с округлением значения субпикселя).

Как убрать это колебание и размытость во время трансформации?

Меня не волнуют браузеры IE, я только хочу, чтобы он работал в последней версии Chrome.
Похоже, что это вызвано transition свойством.

Codepen # 1: https://codepen.io/x84733/pen/yEpYxX

.scalable {
  transition: 0.3s ease-in-out;
  box-shadow: 0 6px 10px rgba(0,0,0,0.14);
}
.scalable:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);  
}

.card {
  width: 100%;
  background: white;
  padding: 20px;
}

body {
  width: 50%; 
  height: 100%; 
  background: #999;
  padding: 20px;
}

<div class="card scalable">
  <div>here some description</div>
</div>

Ответы

Ответ 1

Вместо использования масштаба вы можете рассмотреть translateZ с точки зрения. Убедитесь, что изначально определяете перспективу, чтобы избежать плохого эффекта при быстром перемещении курсора:

.scalable{
  transition: 0.3s ease-in-out;
  box-shadow: 0 6px 10px rgba(0,0,0,0.14);
  transform:perspective(100px);
}

.scalable:hover {
  transform:perspective(100px) translateZ(5px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);  
}

.card {
  width: 100%;
  background: white;
  padding: 20px;
}

body {
  width: 50%; 
  height: 100%; 
  background: #999;
  padding: 20px;
}

<div class="card scalable">
  <div>here some description</div>
</div>

Ответ 2

Также добавьте происхождение от 100% до 104%. Это предотвратит прыжки и размытый конечный результат

.scalable {
  backface-visibility: hidden;
  transition: all 0.3s ease-in-out;
  transform-origin: 100% 104%;
}

.scalable:hover {
  backface-visibility: hidden;
  transform: scale(1.04);  
}

Ура!

Ответ 3

С JavaScript?

const el = document.querySelector("#parent");
const text = document.querySelector("#text");

let i = 0;

el.addEventListener("mouseover",function(){
    this.style.transform = "scale(1.05)";
})
el.addEventListener("mouseout",function(){
    this.style.transform = "scale(1.00)";
  el.style.boxShadow = "0 8px 40px rgba(0,0,0,0.25);"
})

.scalable {
  transition: 0.3s ease-in-out;
  box-shadow: 0 6px 10px rgba(0,0,0,0.14);
}

.card {
  width: 100%;
  background: white;
  padding: 20px;
}

body {
  width: 50%; 
  height: 100%; 
  background: #999;
  padding: 20px;
}

<div id="parent" class="card scalable">
  <div id="text">here some description</div>
</div>