Я хочу, чтобы эта карта масштабировалась при наведении (включая элементы внутри нее), но текст колеблется/дрожит во время преобразования (при наведении на карту) и становится размытым во время и после масштабирования (иногда с некоторыми коэффициентами больше, чем с другими). что, я думаю, связано с округлением значения субпикселя).
Как убрать это колебание и размытость во время трансформации?
-
Меня не волнуют браузеры 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>