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

Fix minor visual bug in Firefox caused by moz-focusring #32821

Merged
merged 5 commits into from
Feb 17, 2021

Conversation

kremit
Copy link

@kremit kremit commented Jan 17, 2021

Found a very minor visual issue in Firefox where the text inside of form fields appears to "ring" or have noise after using the tab key to re-focus the text field. Appears to be related to having this -moz-focusring rule with text-shadow applying to all form-control elements. In v5, it appears this has been properly moved into form-select only. Backporting this change to v4.

text_ringing
fix

Avoid bug in FF where text appears "noisy" due to text-shadow applying to focused form fields.
@kremit kremit requested a review from a team as a code owner January 17, 2021 04:04
@kremit kremit changed the title Move moz-focusring into select.form-control (v4) Fix minor visual bug in FF caused by moz-focusring (v4) Jan 17, 2021
@ffoodd
Copy link
Member

ffoodd commented Jan 27, 2021

@XhmikosR XhmikosR requested a review from mdo January 27, 2021 16:45
@XhmikosR
Copy link
Member

@ffoodd
Copy link
Member

ffoodd commented Jan 28, 2021

@XhmikosR I do on Ubuntu: when focusing in & out the email input (using keyboard), it gets bolder on focus because of text-shadow in our current v4—not in this PR.

@XhmikosR
Copy link
Member

Can you please share a screenshot with the diff? I really can't reproduce the issue even on my Linux mint VM. Or the difference is so subtle I'm missing it.

@ffoodd
Copy link
Member

ffoodd commented Jan 29, 2021

Here it is:

Default Focused
wo-focus w-focus

And it's clear using devtools that text-shadow applied on -moz-focusring is the cause. Since it's been moved in v5, I guess it's a good catch to backport this to v4.

@XhmikosR
Copy link
Member

XhmikosR commented Feb 3, 2021

Maybe I need glasses, but I can't tell the difference myself :/

I'd like @mdo's review just so that we are safe :)

@ffoodd
Copy link
Member

ffoodd commented Feb 3, 2021

Should try to record change when I uncheck text-shadow in devtools, maybe.

@ffoodd
Copy link
Member

ffoodd commented Feb 5, 2021

@twbs/css-review someone able to confirm this bug, and maybe provide better screenshots than mine?

@XhmikosR XhmikosR merged commit 9722106 into twbs:v4-dev Feb 17, 2021
@mdo
Copy link
Member

mdo commented Feb 17, 2021

Realized I forgot to update here with a screenshot and some comments...

Shown below is the default, Inspector-applied :focus, and the real :focus in Firefox. Note the ever so subtle text weight difference on the far right version—that's what is happening on focus for each input it seems.

focus-firefox-compared

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants