Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Closed Beginner friendly
  • Is something wrong?
#20,510 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@Pythe1337N is already working on this.

Since Sep 24, 2026.

  • #20511 by @Pythe1337N — open
  • #20528 by @snmsoodan — open

Assessment

Difficulty
2/5
Estimated time
Half a day
Newbie friendliness
72/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css
Domain
accessibility, frontend

Research direction

Start at the sr-only utility and compare its structure with the child-selector patterns used by space-x-* and divide-*. Reproduce the Play URL in Firefox, then verify that a table's caption is hidden while its accessible name remains intact and that Chrome and Safari behavior is unchanged.

Written by the indexing model from the issue text.

Description

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>
Dominant language
TypeScript
Stars
97.9k
Forks
8.3k
Avg merge
2d 19h
Merged PRs (30d)
24

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from tailwindlabs/tailwindcss

All issues in tailwindlabs/tailwindcss

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.