The reveal that hid itself, permanently

A common way to reveal an image on scroll is to hide it with a clip path, watch it with an IntersectionObserver, and release the clip when it comes into view. We shipped that. On one site, every figure below the fold was invisible, forever.

Why it deadlocks

The browser computes an element's intersection rectangle against its clipped visual box. An element hidden with clip-path: inset(0 0 100% 0) has zero area, so it reports isIntersecting: false and a ratio of zero. The observer never fires. The class is never added. The clip is never released.

It is a deadlock, and it is stable: the thing that would unhide the element can never see the element, because the element is hidden.

The same pattern written with opacity: 0 works fine, which is why a site can have perfectly working text reveals and permanently invisible photographs.

Two reasons it is hard to see

The hiding lived in site head code, which never reaches the visual editor's canvas. So the page looked correct while it was being built and was broken once published.

And our own screenshot tool was blind to it. It forces opacity, visibility and transform back on before capturing, but not clip-path, and its invisible-content check only counts computed opacity below 0.05. A clip-path-hidden element has full opacity. The automated check passed too.

The fix

Clip the child, observe the parent. The parent keeps its full area, so it is always visible to the observer, and the clip on the image inside is released normally.

The wider lesson is the one we keep relearning: any animation has to end in the state the content should be read in, and be harmless if it never runs. If the only thing standing between a visitor and your content is a script firing, you have not built a reveal. You have built a coin flip.