sr-only does not hide a <table>'s <caption> in Firefox

What version of Tailwind CSS are you using?

v4.3.3

What build tool (or framework if it abstracts the build tool) are you using?

Vite 8.2.2 with @tailwindcss/vite 4.3.3. The Play link below reproduces it too, so the build tool is not involved.

What version of Node.js are you using?

v24.15.0

What browser are you using?

Firefox 156.0.1 (aarch64) is affected. Chrome 153.0.8010.53 (Official Build) (arm64) and Safari 27.0 (22625.1.29.11.27) are not.

What operating system are you using?

macOS 27.0

Reproduction URL

https://play.tailwindcss.com/DM34RFq0Bv

Open it in Firefox and the caption text is visible. In Chrome and Safari, nothing is visible.

Describe your issue

sr-only on a <table> hides the table's rows but not its <caption> in Firefox. The caption text is painted on the page, on top of whatever is underneath it. I expected the caption to be hidden as well, since it is part of the table.

This comes up whenever a data table is put behind sr-only as the accessible version of a chart, which is a common pattern.

Cause. Firefox renders this differently from Chrome and Safari. A table generates two boxes: an outer table-wrapper box, which holds the <caption>, and an inner table grid box, which holds the rows. The css-tables-3 draft (section 3.6.1) says clip-path is used on the outer box, and Chrome and Safari do that. Firefox uses it on the inner box, which matches the older CSS 2.1 rule, so the caption is not clipped.

The other declarations in sr-only do not help on a table: a table cannot be narrower than its content, so width: 1px and height: 1px have no effect, and then nothing overflows, so overflow: hidden clips nothing. That leaves clip-path as the only declaration that hides anything.

Firefox has the same difference for opacity, reported as bug 1998269. It was filed on 2025-11-04 and is still open, and a Mozilla engineer notes there that it reproduces in builds from 2016. So I do not expect a Firefox fix soon.

Possible fix in Tailwind. Clip the caption directly, so it no longer matters which box Firefox picks. space-x-* and divide-* already use & > ... child selectors in the same way:

.sr-only > caption {
  clip-path: inset(50%);
}

The caption stays in place, so the table's accessible name does not change. I am happy to open a PR if you want this.

Workaround for anyone who finds this issue: put sr-only on a wrapping <div> and leave the table unstyled. A <div> has only one box, so the problem does not happen.

<div class="sr-only">
  <table>
    <caption>This text is correctly hidden</caption>
    <tr><td>row</td></tr>
  </table>
</div>