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) Replace deprecated clip with clip-path: inset(50%) Aug 28, 2025
@thecrypticace thecrypticace changed the title Replace deprecated clip with clip-path: inset(50%) Replace deprecated clip with clip-path in sr-only 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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Suggestion: Replace deprecated clip in sr-only with clip-path
3 participants