Skip to content

Fix for disabled Safari inputs#1707

Merged
maximedegreve merged 4 commits intomainfrom
hotfix/fix-styling-safari
Oct 27, 2021
Merged

Fix for disabled Safari inputs#1707
maximedegreve merged 4 commits intomainfrom
hotfix/fix-styling-safari

Conversation

@maximedegreve
Copy link
Contributor

@maximedegreve maximedegreve commented Oct 26, 2021

Description

In Safari the text has an opacity that makes the text barely readable.
The fix is to use-webkit-text-fill-color and opacity to set those styles.

This causes a bug in our developer token section on GitHub.
You can see in he screenshot below that in Safari the text is only slightly visible. You can barely see it but it's there.

image-3

This bug was reported in Slack

How to test this?

Snippet to test this 🐛

<input class="form-control" type="text" placeholder="Access token" aria-label="access token" disabled value="my token">

Before:
Screenshot 2021-10-26 at 18 52 22

After:
Screenshot 2021-10-26 at 18 52 17

Found this similar fix somewhere else: jgthms/bulma#2355

/cc @primer/css-reviewers

@changeset-bot
Copy link

changeset-bot bot commented Oct 26, 2021

🦋 Changeset detected

Latest commit: c3702a1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/css Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@maximedegreve maximedegreve marked this pull request as ready for review October 26, 2021 17:58
@maximedegreve maximedegreve requested a review from a team as a code owner October 26, 2021 17:58
Copy link
Contributor

@simurai simurai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Just added a suggestion with short comments that it's a browser specific fix

Co-authored-by: simurai <simurai@github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants