User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:94.0) Gecko/20100101 Firefox/94.0

Steps to reproduce:

Go to https://jqueryui.com/dialog/

Actual results:

Starting from Firefox 78, there is a blue outline around the close butto that is all over the place

Expected results:

The button outline should onle be around the button (works fine in Chrome e.g.)

Also filed in jquery ui as: https://github.com/jquery/jquery-ui/issues/2003

ui-button-icon-only {
...
    text-indent: -9999px;

I think this cause the problem.

(In reply to Alice0775 White from comment #2)

ui-button-icon-only {
...
    text-indent: -9999px;

I think this cause the problem.

Now, the question is: was this change Firefox getting more spec-compliant or an unrelated change? WebKit & Blink don’t exhibit the same behavior, the outline looks fine there. jQuery UI is present in a lot of pages so this is likely affecting a lot of them.

W/ Attachment 9249636 [details]:
Solid red outline is displayed for all version of Firefox.

W/ https://jqueryui.com/dialog/ :
#1 regression, Dotted black outline is displayed.
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=ed3ef7c26759e4a4187c65527e789ccb0fbf773d&tochange=1e5d1f957f717b896d5ffc5dcf96b70234bce8f0

#2 regression, Solid blue outline is displayed insted of dotted black outline.
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=64bc9459015c77f3a032bc4dcb9465c44281b7d9&tochange=e2e3769604efd9724670ca1474377789e003a992

W/ Attachment 9249638 [details] :
Regression, Solid blue outline is displayed
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=3d209ba46c38d6315966868c9a5e937f13125c2f&tochange=0376f601e6542f50aa4ee1bb52d64f058622e9e8

:emilio, could you please look into this?

Yeah so all browsers agree on actually drawing the outline. This is just a browser difference in how we draw outlines (we include overflowing content, which usually creates more consistent results, but in this case since the content is far to the left it looks off).

jQuery can trivially fix it adding overflow: clip or overflow: hidden to the button.

Let's see what tests say: https://treeherder.mozilla.org/#/jobs?repo=try&revision=1e76f2fe8da7342b5248ec87aff57e645cf4b3d0

Backed out for causing reftest failures.

• Backout link
• Push with failures
• Failure Log

https://hg.mozilla.org/mozilla-central/rev/1b335acf7f13

Reproduced the issue with Nightly 96.0a1(2021-11-10).
Verified as fixed with Fx 97.0a1 and Fx 96.0b4 on Windows 10x64, macOS 10.13.6 and Ubuntu 18.4.