Run results for: CSS variables VS Set property

Run details:

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 16_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1

Browser: Mobile Safari 16

Operating system: iOS 16.6.1

Device Platform: Mobile

Date tested: one year ago

Test name	Executions per second
Transform	2285114.5 Ops/sec
CSS property	1863266.6 Ops/sec

HTML Preparation code:

<div>
 <img class="js-image"/>
</div>

Tests:

Transform
const imageToScale = document.querySelector('.js-image'); imageToScale.style.transform = `scale(${0.5})`;
CSS property
const imageToScale = document.querySelector('.js-image'); imageToScale.style.setProperty('--motion-scale', 0.5);