Chrome 75，打破变换起源动画

Question

I found possible issue(or may be it is feature =)) in chrome 75 version. Changes of transform origin during of transform animation doesn't affect on animation. I attached snipet which contains two loops, one changed transform, another changed transform origin.

For example:

In changelog for 75 version I found this commit which probably related to this issue: commit

 const div = document.getElementById('div'); const stat1 = document.getElementById('stat1'); const stat2 = document.getElementById('stat2'); // change transform (function loop(x = true) { requestAnimationFrame(() => { div.style.transform = x ? 'scale(2)' : 'scale(1)'; stat1.innerText = div.style.transform; stat2.innerText = div.style.transformOrigin; }); setTimeout(loop, 2000, !x); })(); // change transform origin (function loop2(x = 0, d = true) { div.style.transformOrigin = `${x}% ${x}%`; stat3.innerText = div.style.transformOrigin; const xx = x + (d ? 1 : -1); setTimeout(loop2, 100, xx, xx > 0 && xx < 100 ? d : !d); })();

 #div { transform: scale(1); transition: transform 4s ease 0s; } /* not important */ #div { background: green; opacity: 0.5; } #div2 { background: grey; color: white; text-align: center; } #div, #div2 { position: absolute; top: 80px; left: 80px; width: 80px; height: 80px; }

 <div id="div2"> <span id="stat1"></span><br/> <span id="stat2"></span><br/> <span id="stat3"></span> </div> <div id="div"></div>

Answer 1

We recently found that this problem was gone. At least since 90.0.4430.85