transform-containing-block-and-scrolling-area-for-fixed.html (1544B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS transforms: Transformed elements with overflow: hidden create scrolling areas for fixed descendants</title> 4 <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-rendering"> 6 <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-property"> 7 <link rel="match" href="transform-containing-block-and-scrolling-area-for-fixed-ref.html"> 8 <meta name="assert" content="For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants."> 9 <meta name="assert" content="The object acts as a containing block for fixed positioned descendants, but also creates scrolling areas for them." 10 <meta name="flags" content="dom"> 11 <style> 12 html, body { margin: 0; padding: 0 } 13 #transformed { 14 transform: translateX(10px) translateY(10px); 15 width: 200px; 16 height: 200px; 17 background: grey; 18 overflow: hidden; 19 } 20 21 #fixed { 22 position: fixed; 23 width: 50px; 24 height: 50px; 25 top: 50px; 26 left: 50px; 27 background: green; 28 } 29 30 #spacer { 31 height: 10000px; 32 width: 10000px; 33 } 34 </style> 35 <body> 36 <div id="transformed"> 37 <div id="fixed"></div> 38 <div id="spacer"></div> 39 </div> 40 <script> 41 document.getElementById('transformed').scrollTo(50, 50); 42 </script> 43 </body>