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

Status: VERIFIED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Daniel Holbert [:dholbert]]

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.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot of bug, using Firefox

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot of expected rendering, using Chrome

Comment 3

[Daniel Holbert [:dholbert]]

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.

Comment 4

[Mike Taylor [:miketaylr]]

Karl, could you pass this along to Google please?

Comment 5

[Karl Dubost💡 :karlcow]

Sent to Google today.

Comment 6

[Karl Dubost💡 :karlcow]

Daniel, does the issue still exist?

Comment 7

[Daniel Holbert [:dholbert]]

Yes, this bug's still reproducible with comment 0's STR.

Comment 8

[Karl Dubost💡 :karlcow]

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.

Comment 9

[Mike Taylor [:miketaylr]]

Attachment: Screen Shot 2018-02-15 at 10.29.19 AM.png

Looks like they fixed this.

Comment 10

[Daniel Holbert [:dholbert]]

Indeed, just checked/verified myself - I see the (redesigned) UI shown in your screenshot now, and there's no outline at all anymore (just a darker dropdown).