Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Disable tap highlights on iOS #12299

Merged
merged 4 commits into from
Oct 26, 2023
Merged

Disable tap highlights on iOS #12299

merged 4 commits into from
Oct 26, 2023

Conversation

thecrypticace
Copy link
Contributor

@thecrypticace thecrypticace commented Oct 26, 2023

Here we're adding -webkit-tap-highlight-color: transparent; to disable tap highlights on iOS.

This means that the brief gray overlay that appears when tapping links or buttons will not anymore.

Before

with.highlight.mov

After

without.highlight.mov

If you want to re-enable the tap highlight in your own project you can do so by adding a rule to revert it to the original value:

@layer base {
  html,
  :host {
    -webkit-tap-highlight-color: revert;
  }
}

@thecrypticace thecrypticace merged commit 97e89d7 into master Oct 26, 2023
10 checks passed
@thecrypticace thecrypticace deleted the feat/no-tap-highlight branch October 26, 2023 17:09
thecrypticace added a commit that referenced this pull request Dec 4, 2023
* Disable tap highlights on iOS

* Update changelog

* Update snapshots

* Update changelog
thecrypticace added a commit that referenced this pull request Dec 5, 2023
* Disable tap highlights on iOS

* Update changelog

* Update snapshots

* Update changelog
thecrypticace added a commit that referenced this pull request Dec 18, 2023
* Disable tap highlights on iOS

* Update changelog

* Update snapshots

* Update changelog
@oncet
Copy link

oncet commented Dec 19, 2023

This also applies to Android, right?

@thecrypticace
Copy link
Contributor Author

It does (at least in Chrome)

@babakfp
Copy link

babakfp commented Dec 22, 2023

Why is this added? That tap highlight is an accessibility/UX thing. This means by default all websites built with TailwindCSS are now less accessible!

@adamwathan, what changed? #9050 (comment)

@BenHerbst
Copy link

I hate this, i wondered why it got removed in my website and then i found this pr ...

@mmikkel
Copy link

mmikkel commented Jan 6, 2024

I agree with the above comments. Tap highlights being removed by default is an accessibility issue.

@hichemfantar
Copy link

I agree that this makes tailwind less accessible by default.

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.

7 participants