Closed Bug 1739894 Opened 2 years ago Closed 2 years ago

Firefox draws outline around overflow area, not matching other browsers

Categories

(Core :: Layout, defect, P3)

Firefox 94
defect

Tracking

()

VERIFIED FIXED
96 Branch
Tracking Status
firefox-esr91 --- wontfix
firefox94 --- wontfix
firefox95 --- wontfix
firefox96 --- verified

People

(Reporter: flack, Assigned: emilio)

References

(Regressed 1 open bug)

Details

(Keywords: regression)

Attachments

(4 files)

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.)

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.

Attached file reduced.html
Attached file reduced0.html
Attachment #9249638 - Attachment mime type: text/plain → text/html

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.

Severity: -- → S3
Status: UNCONFIRMED → NEW
Component: Untriaged → Layout
Ever confirmed: true
Flags: needinfo?(emilio)
Priority: -- → P3
Product: Firefox → Core
Summary: Wrong outline in jquery ui dialog close button starting with FF 78 → Firefox draws outline around overflow area, not matching other browsers
Flags: needinfo?(emilio)
No longer regressed by: 1618639
Assignee: nobody → emilio
Attachment #9249913 - Attachment description: WIP: Bug 1739894 - Add a pref to tweak whether outline includes overflowing descendants or not. → Bug 1739894 - Add a pref to tweak whether outline includes overflowing descendants or not. r=miko,#layout-reviewers
Status: NEW → ASSIGNED
Flags: needinfo?(emilio)
Attachment #9249913 - Attachment description: Bug 1739894 - Add a pref to tweak whether outline includes overflowing descendants or not. r=miko,#layout-reviewers → Bug 1739894 - Stop including overflowing descendants in outlines. r=miko,#layout-reviewers
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/492b433034b3
Stop including overflowing descendants in outlines. r=jwatt

Backed out for causing reftest failures.

Flags: needinfo?(emilio)
Flags: needinfo?(emilio)
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/1b335acf7f13
Stop including overflowing descendants in outlines. r=jwatt
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → 96 Branch
Flags: qe-verify+

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.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
Regressions: 1751574
Blocks: 1701479
Regressions: 1808516
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: