1726987 - Gap between box and outline

Status: RESOLVED INVALID

(Core :: Layout: Text and Fonts, defect)

Description

[Timo Tijhof]

Attachment: gap-ff91-bug.png

Given a background color and outline on an anchor <a> element, with child of <code> having a transparent background, there is a gap between the two, which does not appear in other browsers.

https://codepen.io/Krinkle/pen/dyRbQqL

Browsers:

• Chrome 92: OK.
• Safari 14.1: OK.
• Firefox 91: Bug.
• Firefox 92 beta: Bug.

Other notes:

The test case is the same as for bug 1725813 (I understand and agree with its closing). I suspect, though, that the gap seen here might still be a glitch or interop bug of sorts. If not, I hope this and bug 1725813 would together serve as extra data point for how the differing defaults across browsers lead to a perception of buggy behaviour. Perhaps worthy of some consideration to change or otherwise agree on in some way.

Comment 1

[Timo Tijhof]

Attachment: gap-box-outline-crossbrowser.png

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (reduced)

So in your example, the "gap" is actually from the padding that you've applied to the code (padding: 0.2em 0.4em;). This makes the code element a bit taller than its container, but the extra height looks like a gap since it has a transparent background (and the colorful background that you do see is actually coming from the shorter container element). Nonetheless, the code has a taller padding area and this contributes to the active region of its container, and so it contributes to the area that we encompass with outline.

Put more simply: Chrome doesn't seem to include descendants' padding area in their outlined area, but Firefox does. That's the difference here.

Here's a testcase to demonstrate that (where Chrome doesn't include the upper and lower padding in the outlined area; that gray upper and lower area "leaks out" of the outline in Chrome). I think this is arguably a Chrome bug, rather than a Firefox bug.

Comment 3

[Daniel Holbert [:dholbert]]

Here's a modified version of your original testcase https://codepen.io/dholbert/pen/JjJWLdN

I've adjusted the code styling to
(a) increase the padding
(b) make the background partially transparent instead of fully-transparent
(c) change the outline color to cyan.
Otherwise it's unchanged.

As you can see:

• the outline is taller in Firefox
• the outline is actually including the full padding area
• If you hover the area above and below the code, Firefox and Chrome agree that this whole area is active/clickable. That's why Firefox includes that whole area in the outline (since outline is intended to be used for showing focus, and focus is tied to interactive/clickable elements).

Comment 4

[Daniel Holbert [:dholbert]]

So I think this is INVALID, and the described behavior is actually intended behavior (which happens to differ from Chrome, but in a way where our behavior seems to make more sense with respect to using outline to show focus/hover-state/etc.)