pinch-zoom-position-sticky.html (857B)
1 <!DOCTYPE html> 2 <html class="reftest-wait" reftest-resolution="1.5"> 3 <head> 4 <meta name="viewport" content="width=device-width"> 5 <style> 6 body { 7 margin: 0; 8 height: 2000px; 9 overflow: hidden; 10 } 11 #tall { 12 height: 100vh; 13 } 14 #sticky { 15 position: sticky; 16 bottom: 0; 17 width: 100%; 18 height: 500px; 19 background: repeating-linear-gradient(90deg, transparent, transparent 20px, black 20px, black 40px); 20 } 21 </style> 22 </head> 23 <body onload="scrollTo(0, 500); document.documentElement.classList.remove('reftest-wait');"> 24 <!-- This is similar to the pinch-zoom-position-fixed test, but we add a tall 25 element before the sticky element to ensure that the sticky element is 26 in its "fixed" configuration on page load. --> 27 <div id="tall"></div> 28 <div id="sticky"></div> 29 </body> 30 </html>