You did not specify a height to the scroll container, and why would you? Since it is now a scroll container, it needs a specified height in order for position: sticky to work. The hidden value only disables scrolling for the user, while keeping the option for programmatic scrolling, thus making it a scroll container. The clip value does the same as the hidden value, except for that it completely disables any form of scrolling. If you are interested in improving the performance of your web design, consider reading a post about lazy-rendering using content-visibility: auto and contain-intrinsic-size. It has no way to determine whether to clip on the x-axis or the y-axis, unlike you can with overflow-x and overflow-y with value clip. So that's a slight improvement compared to overflow.Īlso, contain is a CSS property that is used for improving performance, not necessarily for controlling overflow of content. It has been around in Google Chrome since version 52, though. Sadly, this CSS property is also not supported by Safari. If you use contain: paint, then all the descendants that overflow the container, will get clipped to the border-box. There is, however, another rather new CSS property: contain.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |