<!DOCTYPE html> <html class="reftest-wait reftest-no-flush"> <title> Opacity animation creates a stacking context after changing effects </title> <style> span { height: 100px; width: 100px; position: fixed; background: green; top: 50px; } div { width: 100px; height: 100px; background: blue; } </style> <span></span> <div id="test"></div> <script> var elem = document.getElementById("test"); var anim = elem.animate(null, { duration: 100000 }); var newEffect = new KeyframeEffect(elem, { opacity: [1, 1] }, 100000); anim.ready.then(function() { anim.effect = newEffect; requestAnimationFrame(function() { document.documentElement.classList.remove("reftest-wait"); }); }); </script> </html>