Fix minor visual bug in Firefox caused by moz-focusring

[kremit]

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.

[ffoodd]

To give some background here:

• Preview: https://deploy-preview-32821--twbs-bootstrap.netlify.app/docs/4.6/components/forms/#form-controls
• Current v4: https://getbootstrap.com/docs/4.6/components/forms/#form-controls — where I confirm the glitch
• v5: https://getbootstrap.com/docs/5.0/forms/form-control/ — without bug
• Unable to find when it happened in v5: https://github.com/twbs/bootstrap/commits/main/scss/_forms.scss

However seems to work fine.

[XhmikosR]

I fail to see any difference on my machine (FF 85 on Windows 10) between https://getbootstrap.com/docs/4.6/components/forms/#form-controls and https://deploy-preview-32821--twbs-bootstrap.netlify.app/docs/4.6/components/forms/#form-controls

[ffoodd]

@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]

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]

Here it is:

Default	Focused

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]

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]

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

[ffoodd]

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

[mdo]

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.