containing-block-on-visibility-hidden.html (586B)
1 <!DOCTYPE html> 2 <title> 3 Transform animation generates a containing block for fixed-pos descendants 4 even if the animation value is 'transform:none' 5 </title> 6 <style> 7 #parent { 8 visibility: hidden; 9 animation: anim 100s step-end; 10 } 11 12 #fixed { 13 position: fixed; 14 background-color: green; 15 height: 100px; 16 width: 100px; 17 } 18 19 #scroll { 20 overflow-y: scroll; 21 overflow-x: hidden; 22 height: 80px; 23 width: 100px; 24 } 25 @keyframes anim { 26 0% { transform: none; } 27 100% { transform: translateX(0px); } 28 } 29 </style> 30 <div id="scroll"> 31 <div id="parent"> 32 <div id="fixed"></div> 33 </div> 34 </div>