authgear / authgear/authgear-server

[AuthUI, Darkmode] Reveal button not visible in password fields when autofill is active

Open
#2,928 0 comments 0 reactions 0 assignees View on GitHub
reported by qa ui/optional
Dominant language
Go
Stars
2k
Forks
125
Avg merge
2d 17h
Merged PRs (30d)
32

Description

## Background:
Device / Browser (OS version): Chrome on Mac, Safari on Mac
Build: 2023-01-31.0

## Description:
For all password fields in Dark Mode, Reveal button not visible in password fields when autofill is active on Chrome and Safari.

## Steps:

1. Sign up at any project that allow password
2. Enter new password by browser password managers suggestion.
3. See Reveal button not visible as autofill overrode the dark mode color

## Expected:
Reveal button should be visible.

## Screenshot:
Chrome(left), Firefox(center), Safari(right)
Screenshot 2023-02-13 at 3 42 43 PM

Ref:
Facebook: Reveal button decoupled from input, CSS hack to change `-webkit-autofill` color:
![image](https://user-images.githubusercontent.com/4337525/218458701-e21784ee-b922-4dd5-87a9-115393c2b658.png)

Github: Keep dark mode by CSS hack CSS hack to change `-webkit-autofill`:
image

MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill

Contributor guide

Open the contributing guide

Research direction

Reproduce the password-field behavior in Chrome and Safari on Mac using the reported autofill steps, then review the linked MDN :autofill guidance and the referenced CSS approaches. Done means the Reveal button remains visible for autofilled password fields in Dark Mode without regressing the other browser behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
authentication, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.