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

[Pythe1337N]

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>