Hi there,
Working on my website, I was using new shorthand property named scale.
When using this scale property on a div to scale: 20; my images disappears (behind?) until scale transition ends. Works fine on Chrome.
When using transform: scale(20) everything works fine.
Link:
https://drive.google.com/drive/folders/1HB13sujiXKI9xsm3h8g8dlaw0bFsIYrr?usp=sharing
HTML :
<div class="circle"></div>
Css :
.circle{
transition-duration: 600ms;
position: absolute;
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
left: -50px;
top: -50px;
}
.scale-circle{
transition-duration: 600ms;
scale: 20; /* BUG */
transform: scale(20); /* No bug */
}
JS :
const nav_overlay = document.querySelector('.circle')
nav_overlay.classList.toggle('scale-circle')