Speedier tunes
Jeremy Keith showcases a proper real-world performance improvement using content-visibility.
I’ll be honest, I have not given the useful content-visibility CSS property much of a run out in production code for similar reasons that Jeremy outlines:
The first gotcha is that if a browser doesn’t paint the element, it doesn’t know how much space the element should take up. So you need to provide dimensions. At the very least you need to provide a height value. Otherwise when the element comes into view and gets rendered, it pushes down on the content below it. You’d see a sudden jump in the scrollbar position.
The thing for me is until I see a real-world example, I’m not interested in new(ish) things. I think it’s a hangover from the TodoMVC era and JavaScript frameworks. Luckily though, Jeremy explains how this useful CSS property had an impressive impact on his very busy music website.