massive-element-below-viewport-offscreen-ref.html (986B)
1 <!DOCTYPE html> 2 <html> 3 <title>View transitions: massive element below viewport and completely offscreen (ref)</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:khushalsagar@chromium.org"> 6 7 <style> 8 .target_after_bottom_edge { 9 position: fixed; 10 inset-block-start: 0px; 11 inset-inline-start: 0px; 12 } 13 14 .target { 15 contain: paint; 16 inline-size: 100px; 17 block-size: 40000px; 18 view-transition-name: target; 19 } 20 21 .top { 22 inline-size: 100%; 23 block-size: 100px; 24 background: lightblue; 25 } 26 27 .middle { 28 inline-size: 100%; 29 block-size: 39800px; 30 background: green; 31 } 32 33 .bottom { 34 inline-size: 100%; 35 block-size: 100px; 36 background: blue; 37 } 38 39 </style> 40 41 <div class="target target_after_bottom_edge" id="target"> 42 <div class="top">This text is at the top of the box</div> 43 <div class="middle">This text is in the middle of the box</div> 44 <div id="scrollblue" class="bottom">This text is at the bottom of the box</div> 45 </div>