1416683 - The text is not displayed in the search field on http://www.stereomag.ro/

Status: RESOLVED DUPLICATE of bug 752790

(Core :: Layout: Form Controls, defect)

Description

[Ciprian Georgiu, Desktop QA]

Attachment: screencast showing this issue.gif

[Affected versions]:
- latest Nightly 58.0a1 (2017-11-12)
- 57.0 (20171112125346)
- 56.0.2 (20171024165158)

[Affected platforms]:
- Windows 10 x64
- macOS 10.13
- Ubuntu 16.04 x64

[Steps to reproduce]:
1. Start Firefox.
2. Go to http://www.stereomag.ro/.
3. Write something in the search field.

[Expected result]:
- The text is properly displayed after typing in the search field.

[Actual result]:
- The text is not displayed in the search field while typing.

[Regression range]:
- It doesn't seem to be a regression, I can reproduce this on Fx 25.0 as well.

[Additional notes]:
- note that I can't see this issue on Chrome and Edge
- please see the attached screencast

Comment 1

[Jonathan Kew [:jfkthame]]

The problem occurs because the page has styled the <input> element with a fixed height, and then added a lot of top + bottom padding, such that no vertical space is left for the actual text!

A reduced testcase that shows similar rendering would be:

    data:text/html,<input style="font:17px sans-serif;height:43px;padding:20px 16px" placeholder="Search"></input>

It appears the key difference between Gecko and Blink/Webkit/Edge is that the other browsers allow the text of the input element to paint into that padding, whereas we clip it. I'm guessing this has to do with the structure of anonymous content that underlies the <input>, though I haven't looked into it deeply.

I don't know what the site is trying to achieve with the top and bottom padding there; it seems rather pointless to me. I think removing it would basically solve the issue for them. But given the webcompat implications of the difference in behavior here, we should probably look into it.

Moving this to Form Controls, as I think that's really where the problem lies, it's not actually a text layout failure.

Comment 2

[Jonathan Kew [:jfkthame]]

Actually, I think this is an example of bug 752790; that's exactly why the search-box text here is invisible.