Dialog box in jQuery UI rendering issue: close button has long blue outline extending to edge of pag-CodePudding

Using jQuery UI 1.13.0 in Firefox 90.0 64 bit, I see a rendering problem with the Close button (x) on a dialog box when first opened and when you click the dialog title. The blue rectangle showing the focus extends beyond the button to the left of the page.

CodePudding user response：

This seems to be a known bug in Firefox > 77:

https://github.com/jquery/jquery-ui/pull/2010

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

We can hope it will be fixed soon but in the meantime and for users with old versions of Firefox, this workaround fixed the size of the focus outline for me:

.ui-dialog .ui-dialog-titlebar-close {
    overflow: hidden;
}