Skip to content

Conversation

@bronisMateusz
Copy link
Contributor

Summary

This PR replaces the deprecated clip property used in the sr-only utility with clip-path, and updates the corresponding reset in not-sr-only.

  • Closes tailwindlabs/tailwindcss#18768
  • Replaces clip: rect(0, 0, 0, 0); with clip-path: inset(50%); in sr-only
  • Replaces clip: auto; with clip-path: none; in not-sr-only
  • Updates unit test snapshots to reflect the new CSS output

Rationale:

  • clip is deprecated and flagged by modern linters; clip-path is the recommended modern alternative while preserving the intended visually-hidden behavior.

Before:

.sr-only {
  clip: rect(0, 0, 0, 0);
}

.not-sr-only {
  clip: auto;
}

After:

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

.not-sr-only {
  clip-path: none;
}
@bronisMateusz bronisMateusz requested a review from a team as a code owner August 20, 2025 07:56
@thecrypticace
Copy link
Contributor

At one time using clip-path: inset(50%) would cause massive scroll performance problems in Chrome. Though this was many years ago. Will definitely need testing to ensure this isn't a problem any longer before we do this.

@thecrypticace thecrypticace self-assigned this Aug 20, 2025
@RobinMalfait
Copy link
Member

I tested this on an older Android phone in Chrome and it seems to work smoothly. Used play: https://play.tailwindcss.com/P8PkfV5N99

IMG_8311.mov
@thecrypticace thecrypticace changed the title fix(sr-only): replace deprecated clip with clip-path inset(50%) (#18768) Aug 28, 2025
@thecrypticace thecrypticace changed the title Replace deprecated clip with clip-path: inset(50%) Aug 28, 2025
@thecrypticace thecrypticace merged commit 7b03aca into tailwindlabs:main Aug 28, 2025
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

3 participants