offscreen-prerendered-active-opacity-ref.html (660B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>Reference: Active opacity should be rendered if it's inside the display port, even if it's currently offscreen</title> 5 6 <style> 7 8 #scrollbox { 9 border: 1px solid black; 10 width: 200px; 11 height: 200px; 12 overflow: hidden; 13 } 14 15 #scrolledContent { 16 height: 1000px; 17 } 18 19 #opacity { 20 will-change: opacity; 21 opacity: 0.5; 22 margin-top: 250px; 23 width: 100px; 24 height: 100px; 25 box-sizing: border-box; 26 border: 1px solid blue; 27 } 28 29 30 </style> 31 32 <div id="scrollbox"> 33 <div id="scrolledContent"> 34 <div id="opacity"></div> 35 </div> 36 </div> 37 38 <script> 39 40 document.getElementById("scrollbox").scrollTop = 150; 41 42 </script>