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