"font-family: initial" works differently for form elements compared to regular ones

[Vladimir Starkov]

DEMO http://dabblet.com/gist/6fc61a20d75183bcd346f34fa96630f2


Steps to reproduce:

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


CSS:
/* all initial works differently for links and buttons */
.btn {
	all: initial;
	background: red;
}


Actual results:

Button and Link look differently from each other (font-family, bottom and top borders dont match)



Expected results:

Should look the same

[Vladimir Starkov]

Created attachment 301397 [details]
expected

[Vladimir Starkov]

Created attachment 301398 [details]
actual

[Radar WebKit Bug Importer]

<rdar://problem/30535288>

[Manuel Rego Casasnovas]

Created attachment 307374 [details]
Example to reproduce the issue


This happens with all the "form elements" like inputs and that kind of things.

It's enough with using "font-family: initial" to reproduce the issue.

In the attached example on my Linux machine I got:
  div: -webkit-standard
  input: Cantarell

On a macpro:
  div: -webkit-standard
  input: -apple-system

While in Chrome and Firefox both elements have the same value.

[Myles C. Maxfield]

Buttons have their initial font family set to the system font. This isn't a bug.

[Myles C. Maxfield]

I guess there's a compat problem if the other browsers do it.

[Manuel Rego Casasnovas]

(In reply to Myles C. Maxfield from comment #6)
> I guess there's a compat problem if the other browsers do it.

Should we follow up with the CSS WG or not?
I can report an issue on GitHub if you think it's the way to go.

[Ahmad Saleem]

All browsers differ in the attached test case example:

*** Chrome Canary 108 ***

div: Times
input: Times

*** Firefox Nightly 107 ***

div: serif
input: serif

*** Safari Technology Preview 155 on macOS 12.6 ***

div: -webkit-standard
input: -webkit-standard

_____

Just wanted to share updated results. Thanks!