Google drop-down buttons (on e.g. App-specific passwords page) have awkwardly-large focus outline, due to abspos child

ASSIGNED
Assigned to

Status

Tech Evangelism
Desktop
ASSIGNED
2 years ago
a year ago

People

(Reporter: dholbert, Assigned: karlcow)

Tracking

(Depends on: 1 bug)

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [country-all] [sitewait] [css] [suggested fix: add "line-height:0" to CSS rule for .c-g-f-b-ba], URL)

Attachments

(2 attachments)

(Reporter)

Description

2 years ago
STR:
 1. Have your Google account to used 2-factor auth with app-specific passwords.

 2. Visit https://security.google.com/settings/u/0/security/apppasswords in Firefox (the app-specific password generation page).

  (Log in if prompted.)

 3. Press "Tab" until the "Select app" dropdown-button at the bottom-left is focused (with a blue outline).  (You may have to press "tab" ~10+ times before anything is visibly focused.)

ACTUAL RESULTS:
The blue outline extends awkwardly into some blank space below the button. See screenshot.

EXPECTED RESULTS: Blue outline should hug the button.


This is a version of bug 687311, and it's happening because:
 a) We're dropping a zero-sided abspos placeholder frame (for button's abspos dropdown arrow) at the end of that button's contents.
 b) That placeholder is at the bottom-left of the button (to indicate the static position of the abspos element).
 c) That placeholder has the inherited "line-height", so it creates a line at that point with that height.
 d) In Firefox, "outline" wraps the height of all children, including the height of this empty line box.

Chrome differs from us on point "d", so the bug doesn't reproduce there.

Bug 687311 covers this difference between Chrome & Firefox, and it doesn't sound like we're planning on changing behavior there soon, per bug 687311 comment 8, since 'outline' is underspecified and our 'outline' behavior-choice is desirable in other scenarios.

Fortunately, Google can work around this on their end (on this site) by simply specifying "line-height: 0" on the absos element. I'm filing this Tech Evang bug in the hopes that they might do that.
(Reporter)

Comment 1

2 years ago
Created attachment 8673877 [details]
screenshot of bug, using Firefox
(Reporter)

Updated

2 years ago
Attachment #8673877 - Attachment description: screenshot of bug in Firefox → screenshot of bug, using Firefox
(Reporter)

Comment 2

2 years ago
Created attachment 8673878 [details]
screenshot of expected rendering, using Chrome
(Reporter)

Comment 3

2 years ago
In my session, the little abspos arrow (which I think Google should add "line-height:0" to) is:
> <div class="c-g-f-b-ba c-sa-ra">&nbsp;</div>

Its abspos styling comes from this rule:
.c-g-f-b-ba {
    border-color: RGB(119, 119, 119) transparent;
    border-style: solid;
    border-width: 4px 4px 0 4px;
    height: 0;
    width: 0;
    position: absolute;
    right: 5px;
    top: 12px;
}

If I add "line-height: 0" right after "height:0; width: 0" there, then this bug goes away.
Whiteboard: [suggested fix: add "line-height:0" to CSS rule for .c-g-f-b-ba]
Karl, could you pass this along to Google please?
Flags: needinfo?(kdubost)
(Assignee)

Comment 5

2 years ago
contactemail
Sent to Google today.
Flags: needinfo?(kdubost)
(Assignee)

Updated

2 years ago
Assignee: nobody → kdubost
Status: NEW → ASSIGNED
(Assignee)

Updated

2 years ago
Whiteboard: [suggested fix: add "line-height:0" to CSS rule for .c-g-f-b-ba] → [country-all] [sitewait] [css] [suggested fix: add "line-height:0" to CSS rule for .c-g-f-b-ba]
(Assignee)

Comment 6

a year ago
Daniel, does the issue still exist?
Flags: needinfo?(dholbert)
(Reporter)

Comment 7

a year ago
Yes, this bug's still reproducible with comment 0's STR.
Flags: needinfo?(dholbert)
(Assignee)

Updated

a year ago
Depends on: 687311
(Assignee)

Comment 8

a year ago
Thanks Daniel. 
I wonder if we should fix it in Firefox. The comment in Bug 687311 would push me to do so.

> No other browser renders outline in this way—and there's no prefix to turn it off in Mozilla.

But maybe it's difficult. At least, I guess the CSS Working Group should discuss it if the spec is not clear.
You need to log in before you can comment on or make changes to this bug.