After the update to Chrome 125, in some cases the elements started jumping. For example, in the example below when hovering. Please tell me what this is about and how to fix it?
In older Chrome version everything is ok.
*, ::before, ::after {
padding: 0;
margin: 0;
overflow: visible;
font-family: "Arial", sans-serif;
background-color: rgba(0, 0, 0, 0);
background-repeat: no-repeat;
background-position: 0 0;
background-size: contain;
}
.button {
position: absolute;
left: 20px;
top: 20px;
width: 100px;
height: 100px;
}
.content {
position: absolute;
top: 0;
left: 0;
transition: transform .35s;
width: 81px;
height: 53px;
}
.coin {
position: absolute;
top: -1px;
left: 51px;
width: 100px;
height: 100px;
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9CeiTPT1QNO0MG0VSpIXDKn80XXs8rTaDAA&s);
transition: transform .3s;
}
.coin2 {
top: -7px;
left: 156px;
}
.button:hover .coin2,
.button:active .coin2 {
transform: translateY(-5px);
}<div class="button">
<div class="content">
<div class="coin"></div>
<div class="coin coin2"></div>
</div>
</div>