<!DOCTYPE html> <html class="reftest-wait"> <title> Changing target to an element that does not overrider transform animations creates a stacking context even if the animation is delay phase </title> <style> span { height: 100px; width: 100px; position: fixed; background: green; top: 50px; } #first { width: 100px; height: 100px; background: blue; transform: none ! important; } #second { width: 100px; height: 100px; background: blue; } </style> <span></span> <div id="first"></div> <div id="second"></div> <script> var anim = document.getElementById("first") .animate({ transform: ['translateX(0px)', 'translateX(100px)'] }, { delay: 100000, duration: 100000 }); anim.ready.then(function() { anim.effect.target = document.getElementById("second"); requestAnimationFrame(function() { document.documentElement.classList.remove("reftest-wait"); }); }); </script>