pinch-zoom-position-fixed.html (1254B)
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 div { 12 position: fixed; 13 bottom: 0; 14 width: 100%; 15 height: 500px; 16 background: repeating-linear-gradient(90deg, transparent, transparent 20px, black 20px, black 40px); 17 } 18 </style> 19 </head> 20 <body onload="scrollTo(0, 500); document.documentElement.classList.remove('reftest-wait');"> 21 <!-- Test that fixed position elements are attached to the layout viewport 22 instead of the visual viewport. 23 24 The reference page has a position:absolute element in place of a 25 position:fixed element, both positioned at the bottom of the page. 26 27 After zooming in, the top edge of the visual viewport will coincide with 28 the top edge of the layout viewport, but their bottom edges will 29 diverge. 30 31 Since absolute elements are attached to the initial containing block, 32 which coincides with the layout viewport on page load, the rendering of 33 the fixed element will only match if it is being attached to the layout 34 viewport. --> 35 <div></div> 36 </body> 37 </html>