content-visibility in Safari

Earlier this year I wrote about some performance improvements to The Session using the content-visibility property in CSS.

If you say content-visibility: auto you���re telling the browser not to bother calculating the layout and paint for an element until it needs to. But you need to combine it with the contain-intrinsic-block-size property so that the browser knows how much space to leave for the element.

I mentioned the browser support:

Right now content-visibility is only supported in Chrome and Edge. But that���s okay. This is a progressive enhancement. Adding this CSS has no detrimental effect on the browsers that don���t understand it (and when they do ship support for it, it���ll just start working).

Well, that���s happened! Safari 18 supports content-visibility. I didn���t have to do a thing and it just started working.

But ���I think I���ve discovered a little bug in Safari���s implementation.

(I say I think it���s a bug with the browser because, like Jim, I���ve made the mistake in the past of thinking I had discovered a browser bug when in fact it was something caused by a browser extension. And when I say ���in the past���, I mean yesterday.)

So here���s the issue: if you apply content-visibility: auto to an element that contains an SVG, and that SVG contains a text element, then Safari never paints that text to the screen.

To see an example, take a look at the fourth setting of Cooley���s reel on The Session archive. There���s a text element with the word ���slide��� (actually the text is inside a tspan element inside a text element). On Safari, that text never shows up.

I���m using a link to the archive of The Session I created recently rather than the live site because on the live site I���ve removed the content-visibility declaration for Safari until this bug gets resolved.

I���ve also created a reduced test case on Codepen. The only HTML is the element containing the SVGs. The only CSS���apart from the content-visibility stuff���is just a little declaration to push the content below the viewport so you have to scroll it into view (which is when the bug happens).

I���ve filed a bug report. I know it���s a fairly niche situation, but there are some other issues with Safari���s implementation of content-visibility so it���s possible that they���re all related.