1339242 - height of background on 'line-height:normal' inline doesn't match the height of the background on the block that contains it

Status: UNCONFIRMED

(Core :: Layout: Block and Inline, defect)

Description

[iamstarkov]

Attachment: actual.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:51.0) Gecko/20100101 Firefox/51.0
Build ID: 20170125094131

Steps to reproduce:

HTML:
<a class="btn">Button</a>
<button class="btn">Button</button>  
<button class="btn ib">Button</button>

CSS:
/* broken inlined button, FF */
.btn {
	all: initial;
	background: red;
}

/* fix for 140562 https://bugzilla.mozilla.org/show_bug.cgi?id=140562 */
.btn::-moz-focus-inner { all: initial; }

.btn.ib { display: inline-block; }




Actual results:

Button looks and behaves like inline-block, instead of behaving like inline link

P.S. "Computed styles" reports button's display as inline


Expected results:

all three tags should look the same

Comment 1

[iamstarkov]

Attachment: expected.png

expected result from chrome

Comment 2

[iamstarkov]

And demo is here http://dabblet.com/gist/ffae3de4090143fbf112f2d33dfff094

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: reporter's testcase

Comment 4

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

On Linux, I see the expected results rather than the actual results, Firefox 51 (release) and Firefox 53 (Developer Edition).

Comment 5

[iamstarkov]

> On Linux, I see the expected results rather than the actual results, Firefox 51 (release) and Firefox 53 (Developer Edition).

It seems like problem is fixed only for linux. Three notes regarding fix:

1) Can confirm it with FF nightly (54) for linux.

2) Cannot confirm it with FF nightly (54) for MacOS, i see actual broken result (link's height is 16, button's—19.2)

2) Cannot confirm it with FF nightly (54) for Windows, i see different broken result (link's height is 18, button's—19)

Comment 6

[Ilya]

Can confirm it with Firefox Nightly 54 for Windows. Both <button>s have are 1px taller than the regular inline element (<a>).

It appears that the <button> element behaves as if it had display:inline-block, even if it reports that it has display:inline. The difference is more visible with longer text in the elements (see a modified example: http://dabblet.com/gist/a19afa316615ed91242fc2fa19c11df5). Even appearance:none doesn't help to make the <button> behave as an element with display:inline.

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: expanded testcase

This testcase also has an <a> styled as display:inline-block, for comparison.

Note that an inline-block <a> behaves the same as both an inline and inline-block button.

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: test showing button must always act as inline-block

This test shows that a display:inline button, across browsers, always acts as an inline-block.

(Historically, I think this is because button being conceptually inline-block long predates the actual 'inline-block' value of 'display', so button was historically 'display:inline'.)

Comment 9

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: variant of expanded testcase with line-height: 1.0

Comment 10

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

So I think the claim that the button should behave as an inline is invalid; attachment 8838653 [details] shows that, across browsers, button behaves as an inline-block even when styled as display:inline.

The remaining point is that an inline element's background does not match the height that the inline element gives the block that contains it when that inline is 'line-height: normal'.  I suspect this is because we include the external leading from the font metrics, although it might also be related to pixel snapping behavior.

Either way, I'm skeptical that there's a bug here in any strict sense, although it might be worth looking into differences between browsers in handling of how font metrics influence line height.