When combining transform:scale with transition:scale, the animation has two problems, and the problems are similar in Firefox and Chrome.
1) The font/border is extremely blurry during the transition 2) About 0.3s after the transition, the browser 'locks-in' the new scale. It is hard to explain but you will clearly see from the example.
<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>
I've tried adding backface-visibility: hidden but this has no effect in Firefox and makes the end of the transition permanently blurred.
Also tried using transform-origin: 100% 0, but no avail.
Take a look at the Codepen:
https://codepen.io/vibonaaci/pen/LKqrPX
Any ideas? If you use the effect on some more stylized elements, the issue really hurts the eyes.
