Safari IOS 16.0, css scale property bug

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')
Safari IOS 16.0, css scale property bug
 
 
Q